Iphone X HTML 齐刘海 过招篇

前言

最近在做兼容的时候发现一个问题，在设置了全屏width:100%;height:100%的情况下。IphoneX底部会有一个空白区域，这个是IphoneX底部是预留操作区。需要手动拖动才能把白色区域给覆盖。

解决办法

那么如何一开始全屏呢？消除白色区域呢？

Iphone官网已经给予解决方案。在viewport加入 viewport-fit=cover 属性。就可以解决了

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

说明

viewport-fit的作用，它有三个可能的值：

• contain：视口应该完全包含网页内容。这意味着位置固定元素将被包含在iOS 11的安全区域内。
• cover：网页内容应该完全覆盖屏幕。这意味着位置固定元素将固定到屏幕，即使这意味着它们将被遮挡。这恢复了我们在iOS 10上的行为。
• auto：默认值，在这种情况下，它的行为与contain。

因此，要将屏幕覆盖全部屏幕，您需要添加viewport-fit=cover到标记。

相关文章：
ios11-viewport