css适配iPhoneX，iPhone XS Max，iPhoneXR，

妹妹你大胆地往前走啊！

已于 2023-01-12 11:55:39 修改

阅读量4.6k

点赞数

分类专栏：移动端 css 文章标签： iPhone X 适配

于 2019-03-07 16:56:44 首次发布

本文链接：https://blog.csdn.net/danruWang/article/details/88313478

版权

移动端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

一般情况下iPhoneX适配方法有三种
1.viewport-fit:contain

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=contain">
}

2.viewpoer-fit: cover + css canstant()

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

body {
    padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px            
    padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0                
    padding-right: constant(safe-area-inset-right); //如果未竖屏时为0                
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px       
}

3.css的媒体查询(建议使用)

/*适配iphone X,iphone Xs max*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (orientation : landscape) {  }
@media only screen and (device-width: 414px) and (device-height: 896px) and (orientation : landscape) {  }