【更新】剖析 iOS 11 网页适配问题
来源:互联网 发布:手机拍照识字软件 编辑:程序博客网 时间:2024/06/07 14:20
前言
今天这篇是对【第1064期】剖析 iOS 11 网页适配问题 文章的更新版,新增了今天分享更新的内容。
正文从这开始~
更新内容
Webkit 文档 Designing Websites for iPhone X
CSS function env()
The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.
Webkit 在 iOS 11 中新增 CSS function:env() 替代 constant(),文档中推荐使用 env(),而 constant() 从 Safari Technology Preview 41 和 iOS 11.2 beta 开始会被废弃。env() 用法如同 var(),在不支持的 env() 的浏览器中,会自动忽略这一样式规则,不影响网页正常展示:
.post {
padding: 12px;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
CSS function min() 和 max()
在 iPhone X 设备设置网页边距的时候,可能会遇到这样的情形:我们通过 env(safe-area-inset-left) 和 env(safe-area-inset-right) 设置了页面展示左右边距:
.post {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
在横屏状态下显示正常,但是在竖屏状态下,常量 safe-area-inset-left 和 safe-area-inset-right 都为 0,所以会导致页面展示左右边距为 0px,如下图左,正常情况应该是如下图右,竖屏状态下页面左右也有边距。
Webkit 从 Safari Technology Preview 41 和 iOS 11.2 beta 开始,新增 CSS function:min() 和 max(),这两个就可以解决这个问题了。
Both functions take an arbitrary number of arguments and return the minimum or maximum. They can be used inside of calc(), or nested inside each other, and both functions allow calc()-like math inside of them.
@supports(padding: max(0px)) {
.post {
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
}
此处需要使用 @supports 去检测浏览器是否支持 min() 和 max()
参考链接
Human Interface Guidelines-iPhone X
Removing the White Bars in Safari on iPhone X
Understanding the WebView Viewport in iOS 11
- 【更新】剖析 iOS 11 网页适配问题
- iOS视图更新问题
- iOS 11更新后以及iPhone X推出后工程中遇到的问题及适配
- iOS经典讲解之适配iOS 11那些事-持续更新...
- [ios]Xcode 问题调试 慢慢更新
- iOS app更新数据库数据迁移问题
- IOS问题总结(持续更新)
- 常见ios问题(实时更新)
- iOS开发问题总结(持续更新...)
- iOS问题合集(不定期更新)
- iOS面试问题全面梳理 --持续更新
- iOS关于版本更新的问题
- iOS开发之适配IPV6更新网络处理为AFNetworking3.x, 集成以及遇到的一些问题总结。
- WebView网页适配的问题
- iPhone X网页适配问题
- 剖析Hibernate批量更新
- baidu更新时刻剖析
- iOS适配问题
- ImageLoader
- 讲给Android程序员看的前端教程(27)——运算符
- 数据库分片
- MySQL installer安装MySQL 卡在starting serve解决方案
- 函数:使用函数模板,泛型引用,重载进行数据交换
- 【更新】剖析 iOS 11 网页适配问题
- C++ 中include头文件尖括号<>与双引号""的区别
- day 16 lvm讲解
- get post请求的几种方法
- 讲给Android程序员看的前端教程(28)——流程控制
- 通过反射修改ViewPager最小滑动距离mTouchSlop
- UI控件-> ListView(2)
- VMware之EXSI安装-yellowcong
- SwitchyOmega