问题:ios刘海屏手机屏幕内容会被限制在一定区域内,导致左右两侧会出现空白。如图:
解决方法1:
如果网站背景为纯色,最好和简单的解决方案是在body上设置background-color。
解决方法2:
如果网站使用渐变或者图像作为背景,直接设置background-color可能不行。在最新版的ios中,apple添加了viewport-fit属性
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
效果如图:
显然不是我们想要的结果,为了保证在内容显示在安全区内,我们可以设置一些padding、margin或绝对位置值
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
效果如下图:
注意⚠️
constant已从ios11.2中删除,以支持标准化的env。