CSS 适配苹果机型

最新推荐文章于 2023-05-22 16:13:06 发布

原创最新推荐文章于 2023-05-22 16:13:06 发布 · 664 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

前端专栏收录该内容

15 篇文章

订阅专栏

该博客主要介绍了如何使用CSS媒体查询和JavaScript来针对不同型号的苹果设备，如iPhone X, iPhone XR, iPhone XS Max等进行网页头部导航条的适配。内容包括针对不同屏幕尺寸和像素比的设备进行精准定位，确保在不同设备上页面布局的统一和用户体验的优化。

/*适配苹果X*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .header_nav {
        top: 44px;
    }
}

/*适配苹果X smart Max*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    .header_nav {
        top: 44px;
    }
}

/*适配苹果XR */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2) {
    .header_nav {
        top: 44px;
    }
}

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
    .header_nav {
        top: 44px;
    }
}

/*适配，6，7，8*/
@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
    
}

/*适配，6+，7+，8+*/
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
   
}

/*适配，5*/
@media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
   
}

/*适配，4*/
@media only screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) {
 
}

js 处理

// iPhone X、iPhone XS 
    var isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
    // iPhone XS Max 
    var isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
    // iPhone XR 
    var isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;

    if(isIPhoneX || isIPhoneXSMax || isIPhoneXR){
        alert("是新手机");
    }else{
        alert("否");
    }