版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/rth362147773/article/details/79760692
前言
最近在做兼容的时候发现一个问题，在设置了全屏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