zoukankan      html  css  js  c++  java
  • css样式匹配苹果个型号手机

    /*适配苹果X*/
    @media only screen and (device- 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
        .header_nav {
            top: 44px;
        }
    }
    
    /*适配苹果X smart Max*/
    @media only screen and (device- 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
        .header_nav {
            top: 44px;
        }
    }
    
    /*适配苹果XR */
    @media only screen and (device- 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2) {
        .header_nav {
            top: 44px;
        }
    }
    
    @media only screen and (device- 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
        .header_nav {
            top: 44px;
        }
    }
    
    /*适配,6,7,8*/
    @media only screen and (device- 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
        
    }
    
    /*适配,6+,7+,8+*/
    @media only screen and (device- 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
       
    }
    
    /*适配,5*/
    @media only screen and (device- 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
       
    }
    
    /*适配,4*/
    @media only screen and (device- 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("否");
        }
  • 相关阅读:
    第二章、开发环境部署
    第一章、数据分析介绍
    爬虫之Beautiful Soup
    爬虫之selenium
    使用Python连接Mongodb,对数据库进行操作
    Python练习实例002
    Python练习实例001
    Python入门练手100例
    Python
    剑指Offer-003:从尾到头打印链表
  • 原文地址:https://www.cnblogs.com/gopark/p/10268084.html
Copyright © 2011-2022 走看看