版权声明:本文为博主原创文章,未经博主允许不得转载。 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