1、在<body>
或<html>
元素中指定与页面的background-color
一样的颜色用来填充整个页面。这样页面的安全区域和其余部分混合在一起。这种方法对于只有图文信息的简单页面已经足够。
但是对于一些有全屏导航或全屏自适应布局的页面,这样设置并不够。需要2、3方法。
2、第一个新特性是对现有viewport meta
标签的扩展,称为viewport-fit
,它提供对嵌入(insetting)行为的控制。在iOS 11中可以使用viewport-fit
。
viewport-fit
的默认值是auto
,上面看到的的效果就默认的嵌入行为。为了使该行为失效,并导致页面显示到屏幕的大小,你可以设置viewport-fit:cover
来覆盖。
3、设置安全区域(使用max(),当手机横屏竖屏时都能正常设置安全区域。这个特性在ios 11不能使用)
@supports(padding: max(0px)) { .post { padding-left: max(12px, constant(safe-area-inset-left)); padding-right: max(12px, constant(safe-area-inset-right)); }
原文出自: http://www.w3cplus.com/mobile/designing-websites-for-iphone-x.html © w3cplus.com