H5页面适配 iPhoneX

Posted wengwj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5页面适配 iPhoneX相关的知识,希望对你有一定的参考价值。

viewport-fit

ios11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:

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

iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:

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

第一步:设置网页在可视窗口的布局方式

新增 viweport-fit 属性,使得页面内容完全覆盖整个窗口:

1
<meta name=“viewport” content=“width=device-width, viewport-fit=cover”>

 

第二步:页面主体内容限定在安全区域内

这一步根据实际页面场景选择,如果不设置这个值,可能存在小黑条遮挡页面最底部内容的情况。

1
2
3
body {
padding-bottom: env(safe-area-inset-bottom);
}

 

 

别忘了使用 @supports

写到这里,我们常见的两种类型的 fixed 元素适配方案已经了解了吧,但别忘了,一般我们只希望 iPhoneX 才需要新增适配样式,我们可以配合 @supports 这样编写样式:

1
2
3
4
5
@supports (bottom: env(safe-area-inset-bottom)) {
div {
margin-bottom: env(safe-area-inset-bottom);
}
}

以上是关于H5页面适配 iPhoneX的主要内容,如果未能解决你的问题,请参考以下文章

iphone端的H5页面怎么适配iphone5-7p

如何使用Flexible实现手淘H5页面的终端适配

H5页面 强制横屏显示 适配IOS和安卓

使用Flexible实现手淘H5页面的终端适配

使用Flexible实现手淘H5页面的终端适配

收藏文章:使用Flexible实现手淘H5页面的终端适配