一、解决iphonX白条,网站扩展到整个屏幕
网页在iphoneX的浏览器屏幕显示上,默认情况下在头部的2侧会出现白条背景,网站被限制在了一个“安全区域”内,移除白色背景的方法
方法一:设置body的背景色:
.body{ background-color:#f00; }
方法二:添加mate属性viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
说明:viewport-fit有三个值:
contain:视口完全包括网页内容,这意味着fixed定位的元素被包含在了iOS 11的安全区内
cover:网页内容完全覆盖视口,这意味着fixed定位的元素将被固定到视口,即它们也可能会被覆盖,这恢复了我们在ios 10上的行为
auto:默认值,和contain相同
方法三:设置safe-srea-inset-*确保安全边界
改属性值适用于:margin、padding ,以及绝对定位的 top 或 left。以padding为例:
body{ padding-top: constant(safe-area-inset-top); padding-right: constant(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); padding-left: constant(safe-area-inset-left); }