手机端兼容iPhoneX刘海屏
顶部安全距离
- iOS11 iPhoneX constant(safe-area-inset-top) = 88px
- iOS11 其他机型 constant(safe-area-inset-top) = 64px
- iOS10 及以下版本和安卓不识别 constant(safe-area-inset-top)
需要先设置一下meta标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover" />
// 64 为 iOS header 的高度
.ac-container {// 默认值padding-top: 0;// iOS 11- iOS11.2padding-top: calc(~'constant(safe-area-inset-top) - 64px'); // >= iOS11.2padding-top: calc(~'env(safe-area-inset-top) - 64px');
}
- 不识别 constant(safe-area-inset-top) 和 calc 的设备 padding-top 为默认值 0
- iOS11 iPhoneX padding-top 计算得到 24px,即齐刘海高度
- iOS11 其他机型 padding-top 计算也得到的是 0px
底部安全距离
- iOS11 iPhoneX constant(safe-area-inset-bottom) = 34px
- iOS11 其他机型 constant(safe-area-inset-bottom) = 0px
- iOS11 及以下版本和安卓不识别 constant(safe-area-inset-bottom)
// 如果默认值不为 0,需要加上默认值
.ac-container {// 默认值padding-bottom: 10px;// iOS 11- iOS11.2padding-bottom: calc(~"44 *(constant(safe-area-inset-bottom) / 34)");; // >= iOS11.2padding-bottom: calc(~"44 * (env(safe-area-inset-bottom) / 34)");;
}
env()
方法是在 iOS11 中被支持的,一开始他被命名为 constant()
。在 Safari Technology Preview 41 and the iOS 11.2 beta
的版本中支持,constant()
已经被重命名为 env()
。我们可以使用 css 的 fallback
机制来适配所有的版本,如果有必要的话,我们可以提前使用 env()
来适配。
左右安全距离
.container {padding: 12px;// 左右安全距离padding-left: env(safe-area-inset-left);padding-right: env(safe-area-inset-right);
}
当使用了安全区域变量,并不能解决所有的问题。比如,上面的页面,当横屏的时候, env(safe-area-inset-left)
是有值的,当竖屏的时候,env(safe-area-inset-left)=0px
,此时,文本就会挤到屏幕的边缘了。
为了解决这个问题,其实是需要给 padding
设置一个默认值,当 safe-area-inset-left
有值的时候,设置成 safe-area-inset-left
,没值的时候使用默认值。我们可以使用一组新的 css 函数 min() and max()
来解决这个问题。这2个函数可以接受任意个数的参数,并返回最大或者最小的那个。他们也可以用到 calc()
中,也可以相互嵌套使用。
@supports(padding: max(0px)) {.container {padding-left: max(12px, env(safe-area-inset-left));padding-right: max(12px, env(safe-area-inset-right));}
}
注意:@supports
语句可以检查是否支持 max,但不要在其中使用变量,例如:@supports(padding: max(env(safe-area-inset-left)))
,因为 css 对待无效的变量是返回默认值,也就是这个例子中的padding的初始值。css-variables
在上述的示例中,当竖屏时, env(safe-area-inset-left)
是 0,所以 max 函数返回了 12px。当横屏时,env(safe-area-inset-left)
的值会大于 12,所以,max函数会返回 env(safe-area-inset-left)
的值。这就保证了页面的动态适应性。
手机端兼容iPhoneX刘海屏相关推荐
- android 兼容所有刘海屏的方案大全
转载请标明出处: https://blog.csdn.net/DJY1992/article/details/80689632 本文出自:[奥特曼超人的博客] 推荐: - ios兼容iphonex刘海 ...
- android齐刘海屏幕适配,Html5适配iphoneX刘海屏的简单实现i
iPhoneX遮住刘海屏幕就黑一下 怎么解除这种设置啊 在手机桌面找到设置,点击打开. 在设置界面找到通用,点击进去. 在通用界面找到辅助功能,点击进去. 在辅助功能界面找到显示调节,点击进去. 在显 ...
- photoswipe-3.0.5 手机端横屏后竖屏图片无法归位问题解决
photoswipe-3.0.5 手机端横屏后竖屏图片无法归位问题解决 今天使用了photoswipe-3.0.5.min.js,发现一个BUG. 情景如下: window.document.quer ...
- 手机看html网页内容重叠,html5手机端叠加图片触屏滑动查看特效
特效描述:html5手机端 叠加图片 触屏滑动查看特效.html5手机叠加图片手指滑动查看 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 rutrum tellus a tempus ...
- cordova应用兼容iOS11+和iPhoneX刘海屏
前言 最近开发的cordova应用需要兼容 iOS 11+ ,以及 iPhone X 的刘海屏,查了一些资料,这里做下总结. 首先看下正常打包后的App界面,上下有明显的黑色区域,并没有占满整个屏幕. ...
- 使用 css 适配 iphoneX 刘海屏
iphoneX 刘海屏幕导致 h5 页面不能正常的全屏显示了,就需要对 页面进行适配,下面就详细说说如何适配. 首先上一张适配之前的图: 可以看到页面顶部被遮挡,底部贴着最下面 ios11 增加新特性 ...
- 解决HTML5+sdk开发的webapp兼容各种刘海屏的问题
近一年各种刘海屏相继出世,特此记录解决方案 在manifest.json文件下的代码视图中 plus对象下添加如下代码即可 "splashscreen" : {"auto ...
- Flutter iPhoneX 刘海屏适配
对于Flutter来说,刘海屏主要适配的是上下的边距, 需要把不可点击的区域留出来,同时要把背景颜色和图片放上去. 对于上面的边距, 如果使用 Scaffold , appBar已经自动为我们做好了适 ...
- 关于H5页面在iPhoneX刘海屏适配(转)
关于H5页面在iPhoneX适配 1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多 ...
最新文章
- 基于OpenCV的图像强度操作
- php参数一个字符串数组,PHP字符串控制台参数到数组
- 【Linux】一步一步学Linux——stat命令(77)
- Python第三方包-你了解numpy吗(numpy基础)
- 玩转带外触发的单目相机之一
- java底层机制_Java同步机制的底层实现
- _Linux 最常用命令整理,建议收藏!
- 历时 7 天,我把一万行 Scala 代码移植到了 Kotlin 上!
- Python:IPython性能度量
- C++/Python/Java/C,四大语言对比,你更喜欢哪种?
- python 文字转语音wav_使用Python实现文字转语音并生成wav文件的例子
- Newtonsoft.Json基础问题
- php爬虫采集类-phpQuery:支持抓取网站,非常强大的php类库
- koa利用koa-views通过路由返回html页面
- JQuery EasyUI 结合ztrIee的后台页面开发
- 互联网之子:亚伦·斯沃茨
- itext文本域自动换行_iText+Flying Saucer生成pdf文档,中文不显示和不自动换行问题...
- python 今日头条 微头条_今日头条微头条范文-头条号的微头条你们都发些什么,该如何写?...
- 亚马逊SP-API申请,亚马逊SP-API注册,亚马逊开发者申请,PII申请怎么做?SP-API是什么?
- 《大话处理器》简要学习笔记
热门文章
- mpvue开发微信小程序踩坑笔记
- 人工智能的历史与未来,主要划分为了哪三个阶段
- 今天不谈技术,说说一些常用的软件~By 逆天
- JavaDay27 HTML
- 高德地图如何同时显示多个InfoWindow信息窗体
- Variable Selection via Nonconcave PenalizedLikelihood and its Oracle Properties 论文解析-特征选择的Oracle特性-1
- 手把手教你实现Android真机远程截屏
- 麒麟V10系统-wps提示不小心挂掉了
- elemntui icon 大小_vue-elementui 引入第三方iconfont图标 并使用彩色icon
- MySQL必知必会二十三:使用存储过程