【必看】iPhone X 的凹槽 和 iOS 11 中一些相关 CSS 属性

2017-12-8 13:47| 发布者: 蚂蚁大喇叭| 查看: 2528| 评论: 23

摘要: 苹果的 iPhone X 配备了一个覆盖整个手机的全屏幕,但是顶部保留了一个“凹槽”,为相机和其他各种组件腾出空间。结果是屏幕设计时有一些尴尬局面,例如将网站限制在“安全区域”,那么边缘会有白色空白条。
  苹果的 iPhone X 配备了一个覆盖整个手机的全屏幕,但是顶部保留了一个“凹槽”,为相机和其他各种组件腾出空间。结果是屏幕设计时有一些尴尬局面,例如将网站限制在“安全区域”,那么边缘会有白色空白条。想要移除这个白色空白条虽然不难,在 body 设置一个 background-color 就可以搞定。或者,你可以 viewport-fit=cover 添加到 meta viewport 标签上,以使网页填充满整个屏幕。
  
  HTML代码:<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

  

  然后,你要考虑到任何重叠的情况,通常是由安全区域处理的。有一些新的CSS可以帮助你适应这种情况。
  
  为了处理可能需要的任何调整,iOS 11 的 Safari 版本引入了一些常量,可以在使用 viewport-fit=cover 时使用。
  
  safe-area-inset-top :视口顶部到安全区域的距离(以CSS像素为单位)。
  
  safe-area-inset-right :视口最右边到安全区域的距离(以CSS像素为单位)。
  
  safe-area-inset-left :视口最左边到安全区域的距离(以CSS像素为单位)。
  
  safe-area-inset-bottom :视口底部到安全区域的距离(以CSS像素为单位)。
  
  这些值可以应用到 margin , padding ,或者绝对(absolute)定位的 top 或 left 上。
  
  它们可以通过 CSS 的 constant() 函数转换成我们常用的属性值,例如, 我将以下内容添加到网站上的主容器中。
  
  CSS代码:padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
  
  凹槽,安全区域和固定(fixed)定位还会造成另一个尴尬局面。
  
  iOS 11与早期版本不同之处在于 webview 内容现在遵循安全区域。这意味着如果你的 header 是一个的 top 设置为 0 的固定(fixed)定位的元素,它将被初始渲染在离屏幕顶部向下 20px 的位置, 对齐到状态栏的底部。当你向下滚动页面时,它会在状态栏后面移动。当你向上滚动,它将再次滑到到状态栏的下方(网页内容会在那条尴尬的 20px 的缝隙中显示)。
  
  你可以在下面这个视频看到有多糟糕:

  

  幸运的是,将 viewport-fit=cover 添加到 meta viewport 标签就可以轻松修复。
  
  iPhone X 和 iOS 11 其他一些技巧
  
  关于 viewport-fit
  
  viewport-fit可以设置可视窗口(Visual Viewport)的大小。在设备的物理屏幕上看到的初始布局视窗。在圆形屏幕上,当前屏幕上显示的部分是圆形的,但是Viewport却是矩形的。因此,根据Viewport的大小,页面的某些部可能被剪切。
  
  viewport-fit 接受三个值:
  
  auto:这个值不影响初始布局视窗,整个Web页面是可视的。在视窗之外的UA绘制的是未定义的,它可能是画布的背景色,或者是UA认为合适的其他东西;
  
  contain:最初的布局视窗和视觉布局视窗被设置为最大的矩形。在Viewport之外的UA绘制的是未定义的,它可能是画布的背景色,或者UA认为合适的其他东西;
  
  cover:初始布局视窗和视觉布局视窗被设置为设备物理屏幕的限定矩形;
  
  CSS constants 示例
  
  假设你有一个固定(fixed)定位的标题栏,在 iOS 10及之前的 CSS 目前看起来像这样:
  
  CSS代码:
  
  header {
  position: fixed;
  top: 0;
  left: 0; 
  right: 0;
  height: 44px;
  padding-top: 20px; /* 状态栏高度 */
  }
  
  要使 iPhone X 和其他 iOS 11 设备自动进行调整,您可以将 viewport-fit=cover 添加到 meta viewport 标签,并更改 CSS 来引用常量:
  
  CSS代码:
  
  header {
  /* ... */
  /* iOS 10 上 状态栏高度 */
  padding-top: 20px;
  /* iOS 11+ 上 状态栏高度 */
  padding-top: constant(safe-area-inset-top);
  }
  
  对于不能识别 constant() 语法的旧设备,请保留备用值。您也可以在CSS calc() 表达式中使用常量。
  
  主题颜色 theme color
  
  iPhone X 在 portrait 模式下(竖屏)状态栏和URL地址栏会有一定的透明度,所以他们会显示半透明的网页背景色 background。

  
  这与 Android 上的 Chrome 渲染 theme-color meta 标签类似,以便在状态栏中使用网页的主要颜色。
  
  HTML代码:<meta name="theme-color" content="#676767">
  
  如果你要覆盖整个可视窗口(viewport),那么你可能需要一点点小技巧才能避免隐藏内容!具体实现,关注蚂蚁社区,我们下次讲解!

无语

惊吓
1

期待
1

很赞

差劲

刚表态过的朋友 (2 人)

相关阅读

发表评论

最新评论

引用 wewopa 2018-10-11 15:19
写的 挺好呀 哈哈
引用 缪先生 2018-9-24 12:11
厉害厉害
引用 九曜秘策 2018-9-23 17:38
【必看】iPhone X 的凹槽 和 iOS 11 中一些相关 CSS 属性
引用 sclien 2018-9-11 09:23
太好了
引用 dywzly321 2018-9-11 08:23
看起来还行吧
引用 qw220052005 2018-8-27 15:54
学习学习!!
引用 592642271 2018-6-13 23:28
哈哈  公说公有理 婆说婆有理 这种事情谁说的准
引用 venus1228 2018-5-15 17:40
好好好好好好好好好好好好
引用 mayi3432223 2018-4-13 23:19
苹果X的刘海太丑了
引用 yang123 2018-4-10 13:46
AS 啊是AS啊
引用 yang123 2018-4-10 13:45
ASasS as
引用 yang123 2018-4-10 13:45
AS啊SASA
引用 yang123 2018-4-10 13:40
啊啊实打实
引用 t99121 2018-4-5 06:06
看帖回帖是美德 就是想赚点币
引用 liuzhihao1000 2018-4-2 16:16
sdfsdfsfsdfsdf
引用 guoyouheng312 2018-3-16 09:07
看帖回帖是美德
引用 guoyouheng312 2018-3-15 17:21
看帖回帖是美德
引用 asd838183132 2018-3-10 08:35
天啦鲁,我的蚂蚁币不够啊谢谢分享,谢谢分享。。。。。。。
引用 mengiswo 2018-3-6 12:25
牛逼
引用 xiaoxiaoanger 2018-3-2 03:49
看帖回帖是美德

查看全部评论(23)

相关分类

关闭

网站推荐上一条 /1 下一条

关注蚂蚁HTML5社区官方微信
关注蚂蚁HTML5社区官方微信

邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© 2014-2018 MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

返回顶部