web app 一分钟适配 iPhone X
来源:互联网 发布:sql insert 已经存在 编辑:程序博客网 时间:2024/04/30 06:04
明天就要开抢 iPhone X 了,然而面对 iPhone X 这个奇葩的屏幕,你准备好了吗?
因为 iPhone X 的刘海设计,Web 在 iPhone X
横屏
时,可能会有些问题:- 默认情况,iPhone X 会将页面填充到安全区域(safe area),就像上面的图一样,一般情况下是没有问题的;
- 但如果是全屏 Web App 就会有问题了,比如背景色和页面的契合程度之类的;
- 有的 iOS app 内置 WKwebview 可能会为了避免一些bug,而采用统一的行为,就是禁用 iOS 11 自己的内容区域判断,从而让 H5 默认全屏,如下图:
解决方案
1. 默认全屏
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
在 viewport 的 meta 属性中,添加 viewport-fit=cover
即可。
viewport-fit 默认值为 auto/contain
,全屏值为cover
,是不是感觉很熟悉?嗯,和 background-size
以及 object-fit
一样的。
2. 设置页面边距为安全区域边距
body{ padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); }
嗯,constant()
以及 safe-area-inset-top
safe-area-inset-right
safe-area-inset-bottom
safe-area-inset-left
是 iOS 11 webview 新增加的特性,专门用于应对刘海的。。。
当然,这里的padding
只是用于匹配iPhone X默认的安全区域的,你可以设置任何值,不过建议要不小于默认的安全区域值。
当前版本,横屏时,各属性的值:
safe-area-inset-top = 0 safe-area-inset-right = 44px safe-area-inset-bottom = 21px safe-area-inset-left = 44px
竖屏时各值都是 0,但竖屏时需要特别留意 status-bar(44px) 和 home-indicator(34px)。
阅读全文
0 0
- web app 一分钟适配 iPhone X
- iPhone X App 页面适配
- 10分钟适配 iOS 11 & iPhone X
- 10分钟适配 iOS 11 & iPhone X
- iPhone X一分钟售罄!你们简直壕无人性!
- 创建离线IPhone Web App
- iphone X 屏幕适配
- iPhone X 屏幕适配
- iPhone X全屏适配
- iPhone X 的适配
- iphone x 适配问题
- AI一分钟 |“最抢手”毕业生排名出炉:清华没进前三?支付宝将支持iPhone X刷脸
- iPhone X Web前端页面适配(处理可爱的刘海)
- iphone Web App 导航设计探讨
- iPhone Web App 导航设计探讨
- iPhone Web App 导航设计探讨
- 開發 iPhone Web App 的小技巧
- safari调试iPhone app web页面
- 最新消息:ICO不仅“一刀切”,还要“一刀切到底”
- 2017年第二季度全球科技公司IPO报告出炉,两年来科技IPO最好的一季
- 打破规则,vivo官方曝光X20全面屏概念视频
- Linux下环境变量与文件查找
- JavaWeb与JavaEE命名规则(规范)
- web app 一分钟适配 iPhone X
- 项目上线最后工作——布署环境
- HDU 5115--Dire Wolf
- 有些错误控制台不打印。如何查看不打印的错误信息:断点--》选中报错的代码(某行下一步断点不执行到下一行。说明这行有错)--》右键inspect
- 高盛:中国AI崛起 BAT是最大受益者
- 这颜值是要逆天 vivo接连发布六张X20全屏美景海报
- 坚果智能影院新品倒计时海报曝光,这次要搞大事情?
- 大学英语单词S
- 美到让你尖叫 vivo X20全面屏真机图曝光