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("否");
        }
  • 相关阅读:
    37. Sudoku Solver(js)
    36. Valid Sudoku(js)
    35. Search Insert Position(js)
    34. Find First and Last Position of Element in Sorted Array(js)
    33. Search in Rotated Sorted Array(js)
    32. Longest Valid Parentheses(js)
    函数的柯里化
    俞敏洪:我和马云就差了8个字
    vue路由传值params和query的区别
    简述vuex的数据传递流程
  • 原文地址:https://www.cnblogs.com/gopark/p/10268084.html
Copyright © 2011-2022 走看看