【更新】剖析 iOS 11 网页适配问题
2017-11-07 00:00
477 查看
前言
今天这篇是对【第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
今天这篇是对【第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更新后及iPhone X推出后工程中遇到的问题及适配方法
- iOS 11更新后以及iPhone X推出后工程中遇到的问题及适配
- ios 11 屏幕适配问题!
- ios 11和iphone x的相关适配问题及解决方法
- iOS 11 下适配UITableView 问题
- iOS开发之App开发团队必须知道的 iOS 11 更新点几iPhoneX的屏幕适配
- 适配iOS 11及iPhoneX iOS 11下tableView内容下移的问题
- Swift - 适配iOS 11,部分问题
- iOS开发之适配IPV6更新网络处理为AFNetworking3.x, 集成以及遇到的一些问题总结。
- iOS 11 自定义UINavigationBar适配问题,导航条向上偏移20点问题
- iOS经典讲解之适配iOS 11那些事-持续更新...
- iOS 11 下适配UITableView 问题
- ios 11 适配遇到的问题
- iOS11/iPhoneX相关适配问题
- iOS 11 适配问题-顶部出现20点的白边
- iOS 11中APP中tableView内容下移20pt或下移64pt的问题适配的一个总结
- iOS11/iPhoneX相关适配问题
- iOS 银联SDK更新后遇到的问题
- 【iOS开发必收藏】详解iOS应用程序内使用IAP/StoreKit付费、沙盒(SandBox)测试、创建测试账号流程!【2012-12-11日更新获取"产品付费数量等于0的问题"】
- 兼容iOS 10 升级xcode8出现的问题及一些适配问题的解决方案