使用 css 适配 iphoneX 刘海屏

iphoneX 刘海屏幕导致 h5 页面不能正常的全屏显示了，就需要对
页面进行适配，下面就详细说说如何适配。

首先上一张适配之前的图：

可以看到页面顶部被遮挡，底部贴着最下面

ios11 增加新特性，增加webkit 的 css 函数，css 预定义变量
四个预定义变量为设定安全区域和边界的距离，如下:

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

safe-area-inset-left 默认是 0
safe-area-inset-right 默认是 0
safe-area-inset-top 默认是 44px
safe-area-inset-bottom 默认是 34px

css 函数 env() 和 constant()
这两个函数都是 webkit 中 css 函数，可以直接使用变量函数，只有在 webkit 内核下才支持

env 函数
必须在 ios >= 11.2 才支持

constant 函数
必须 ios < 11.2 支持

在写的时候要做到兼容

padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

适配之后如图：

可以看到底部安全区域个人感觉是有点多了的，所以也可以不用 safe-area-inset-bottom 这个属性，通过媒体查询（利用iphoneX独特的型号参数）来给底部留下预留空间：

// iphoneX、iphoneXs
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
// iphone Xs Max
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3),
// iphone XR
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2)
{.container {padding-top: constant(safe-area-inset-top);padding-top: env(safe-area-inset-top);&.safe-bottom {padding-bottom: 13px;}}
}

使用 css 适配 iphoneX 刘海屏相关推荐

android齐刘海屏幕适配,Html5适配iphoneX刘海屏的简单实现i
iPhoneX遮住刘海屏幕就黑一下怎么解除这种设置啊在手机桌面找到设置,点击打开. 在设置界面找到通用,点击进去. 在通用界面找到辅助功能,点击进去. 在辅助功能界面找到显示调节,点击进去. 在显 ...
H5 CSS适配手机刘海屏高度
设置css样式关键在于padding-top的设置,自动适配刘海屏的高度 .header {position: relative;display: flex;align-items: center; ...
如何用CSS适配iPhoneX底部小横条
如何用CSS适配iPhoneX底部小横条前言 iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理 ...
css适配iphoneX
css适配iphoneX 前言 iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要 ...
沉浸式状态栏实现，完美适配Android刘海屏，终极兼容
第一篇博客献给曾经帮助我N次的CSDN,在此感谢那些帮助我头发越来越少的***. 刘海屏出来有一段时间了,为了适配刘海屏找了不少方案,感觉都比较费劲. 因为我们项目需求,状态栏是渐变色,所以我采用了全 ...
Android 屏幕适配之刘海屏适配（notch 适配）
引言首先先翻译一下 notch 即凹痕的意思,那我们就认为是 "刘海" 就可以了. 目前,市场手机的潮流就是推出全面屏.齐刘海的手机,比如现在的华为.oppo .vivo ...
Flutter iPhoneX 刘海屏适配
对于Flutter来说,刘海屏主要适配的是上下的边距, 需要把不可点击的区域留出来,同时要把背景颜色和图片放上去. 对于上面的边距, 如果使用 Scaffold , appBar已经自动为我们做好了适 ...
ios webview iphoneX 刘海屏适配
参考文章:https://ayogo.com/blog/ios11-viewport/ 问题 webview 在iphoneX中的一些表现会不满足业务预期,如下广告,头部和底部都会留有空白,而业务方真 ...
cordova应用兼容iOS11+和iPhoneX刘海屏
前言最近开发的cordova应用需要兼容 iOS 11+ ,以及 iPhone X 的刘海屏,查了一些资料,这里做下总结. 首先看下正常打包后的App界面,上下有明显的黑色区域,并没有占满整个屏幕. ...

使用 css 适配 iphoneX 刘海屏

使用 css 适配 iphoneX 刘海屏相关推荐

最新文章

热门文章