本文主要介绍对iphoneX及以上适配。提供css和js的适配方式。
一、设置网页在可视窗口的布局方式
<meta name="viewport" content="width=device-width, viewport-fit=cover">
注:
viewport-fit=cover
使得页面内容完全覆盖整个窗口
二、页面主体内容限定在安全区域内
body {
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
注:只有设置了
viewport-fit=cover
,才能使用env()
。env()
跟constant()
需要同时存在,而且顺序不能换。
三、fixed 元素的适配
{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
注:当然不是只能用
padding