码迷,mamicode.com
首页 > 其他好文 > 详细

iPhoneX理发指南

时间:2018-01-06 17:12:01      阅读:750      评论:0      收藏:0      [点我收藏+]

标签:js代码   作用   通过   参与   ons   isp   升级   默认   des   

技术分享图片?
iPhoneX的正面几乎都是屏幕,除了一块齐刘海(sensor housing)来放置前置摄像头和一些传感器。为了让全屏的网页在iPhoneX上有比较好的浏览效果,必须保证布局的内容不被iPhneX的四角的圆角屏幕以及刘海遮挡,除此之外,还要尽量避免让有交互的区域固定在嘴巴上(home indicator)。

如下图所示在iPhoneX全屏模式下打开v2ex社区,其导航头被状态栏遮住,体验不是很好。
技术分享图片?
为了让UI布局完全处于可见区域,苹果提出了一种安全区的概念(Safe Area),如下图所示,苹果建议开发者把布局限制在安全区内。要想网页在iPhoneX上的内容处于安全区,当然有两种方案,一种是通过js实现,检测设备类型,如果是iPhoneX就设置不同的样式,但是这种方案需要写js代码,还会产生重新重绘或回流,性能比较差。最好的方案当然是直接通过CSS控制。
技术分享图片?

幸运的是,苹果给出了很好的解决方案。ios11支持viewport-fit属性,用于设置网页在可视窗口的布局方式,可设置三个值:

  • contain: 可视窗口完全包含网页内容(如下上图)
  • cover:网页内容完全覆盖可视窗口(如下下图)
  • auto:默认值,跟 contain 表现一致(默认)

技术分享图片?
参考:viewport-fit-descriptor

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

当网页设置viewport-fit=cover时,ios11 WebKit内核支持如下的一些预定义的常量safe-area-inset-*

safe-area-inset-left:安全区左边距
safe-area-inset-right:安全区右边距
safe-area-inset-top:安全区顶部边距
safe-area-inset-bottom:安全区底部边距

这些预定义常量可以应用在margin、padding、top、left、width、height等可以设置尺寸的样式属性上,我们只需要把它当成一个已知的常量看待,甚至可以参与calc()函数的计算。使用时需要结合env函数。
如:

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

注意

  • 只有当 viewport-fit-coverenv函数才会起作用的。对于不支持 env 的浏览器,浏览器将会忽略它。
  • 另外还需要说明的是ios11刚发布时并不支持标准的env的函数,而是constant函数,在ios11.2时constant函数被移除,换成了标准的env函数,实际上影响的用户应该很少,换了新手机的人当然喜欢升级系统了。如果不放心的话可以同时添加两条css语句,因为浏览器对于不支持的css的语句会直接忽略,但是要最好把constant函数语句放在前面。
  • 在非iPhoneX的ios11设备上上面的值为0,不会影响网页在其他设备上的布局。

有了上面的基础,我们可以轻易给v2ex的网站适配一下iPhoneX
:给meta标签添加viewport-fit=cover,body标签的padding设置

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

技术分享图片?

参考资料

Designing Websites for iPhone X
Removing the White Bars in Safari on iPhone X

iPhoneX理发指南

标签:js代码   作用   通过   参与   ons   isp   升级   默认   des   

原文地址:https://www.cnblogs.com/star91/p/iPhoneX-li-fa-zhi-nan.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!