css样式匹配苹果个型号手机

Posted SSXfont

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css样式匹配苹果个型号手机相关的知识，希望对你有一定的参考价值。

/*适配苹果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) {
 
}

 

以上是关于css样式匹配苹果个型号手机的主要内容，如果未能解决你的问题，请参考以下文章

设置苹果手机input按钮和button按钮颜色显示问题

怎么查看苹果手机本机性能

CSS里怎么更改字体样式？需要更改字体和居中显示

手机端实现Tooltip (Hover)

苹果手机怎么辨别?

苹果手机里面如何查看ios？