第一步: 设置网页可视窗口的布局方式
<meta name="viewport" content="width=device-width,viewport-fit=cover" />
viewport-fit属性使得页面内容完全覆盖整个窗口。
第二步:页面主体内容限定在安全区域内
body { padding-bottom: constant(safe-area-inset-bottom); }
// 设置了viewport-fit属性,才能使用constant函数
第三步:fiexd元素的适配
类型一:fixed完全吸底元素(bottom = 0),如下图:
a、可以通过加内边距padding扩展高度:
.xx { padding-bottom: constant(safe-area-inset-bottom); }
b、或者可以通过计算函数calc覆盖原来的高度
.xx { height: calc( 原来的高度值 + constant(safe-area-inset-bottom)); }
*注意,这个方案需要吸底条必须是有背景色的,因为扩展的部分背景是跟随外容器的,否则出现镂空情况。
类型二:fixed 非完全吸底元素(bottom ≠ 0),比如 “返回顶部”、“侧边广告” 等
a、这种需要对应的向上调整,可以仅通过外边距margin来处理
.xx { margin-bottom: constant(safe-area-inset-bottom); }
b、或者通过计算函数calc覆盖原来的bottom值
.xx { bottom: calc( 原来的bottom值 + constant(safe-area-inset-bottom) ); }
fixed元素适配,只需要iphoneX才需要时,需要配合@support条件判断:
@support( bottom: constant( safe-area-inset-bottom ) ) {
.xx { margin-bottom: constant(safe-area-inset-bottom); }
}
属于iphoneX的媒体查询:
@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) { ... }
================== 完美!!! =====================