H5 适配 iPhone X

1，设置网页在可视窗口的布局方式

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

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

  

 

  
1
 

只有设置了 viewport-fit=cover，才能使用 env 函数。

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

2，页面主体内容限定在安全区域内

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

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

  

 

  
1
  
2
  
3
 

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

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

这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）。

3，fixed 元素的适配

• 可以通过加内边距 padding 扩展高度：

{
	padding-bottom: env(safe-area-inset-bottom);
}

  

 

  
1
  
2
  
3
 

• 或者通过计算函数 calc 覆盖原来高度：

{
	height: calc(60px(假设值) + env(safe-area-inset-bottom));
}

  

 

  
1
  
2
  
3
 

• 或者，你也可以通过计算函数 calc 覆盖原来 bottom 值：

{
	bottom: calc(50px(假设值) + env(safe-area-inset-bottom));
}

  

 

  
1
  
2
  
3
 

4，别忘了使用 @supports

一般我们只希望 iPhoneX 才需要新增适配样式，我们可以配合 @supports 这样编写样式：

@supports (bottom: env(safe-area-inset-bottom)) {
	div {
		margin-bottom: env(safe-area-inset-bottom);
	}
}

  

 

  
1
  
2
  
3
  
4
  
5
 

原文：https://blog.csdn.net/dx18520548758/article/details/80010358

文章来源: blog.csdn.net，作者：yechaoa，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/yechaoa/article/details/85318808