小程序&H5 适配iPhoneX/XS 安全区

适配的含义

可视、可操作区域是在安全区域内。

没有做适配的情况：

安全区的含义

不被圆角、齐刘海、底部小黑条（Home Indicator）遮挡的长方形。

H5页面适配安全区

body {
    padding: constant(safe-area-inset-top) 
    constant(safe-area-inset-right)              
    constant(safe-area-inset-bottom) 
    constant(safe-area-inset-left);  
	// constant在iOS<11.2的版本中生效   
	  
	padding: env(safe-area-inset-top) 
	env(safe-area-inset-right) 
	env(safe-area-inset-bottom) 
	env(safe-area-inset-left);     
	//env在iOS>=11.2的版本中生效 
}
复制代码

运用：安全区要根据具体场景灵活使用。 

重点： safe-area-inset-left：安全区域距离左边边界距离 safe-area-inset-right：安全区域距离右边边界距离 safe-area-inset-top：安全区域距离顶部边界距离 safe-area-inset-bottom：安全区域距离底部边界距离 注：safe-area-inset-方向 的本质是一个长度。所以可以直接作为属性padding的属性值。 

延伸： meta标签有一个属性，叫viewport-fit，顾名思义，就是网页内容在设备可视窗口的填充方式。有两种填充方式： 

    cover:  网页内容完全覆盖可视窗口       
    contain:  可视窗口完全包含网页内容
复制代码

我们做安全区的适配前，需要把我们的viewport-fit设置成cover之后，再去做padding的适配。

也就是说需要把整个网页内容撑满，在撑满的基础上再去设置上下左右的间距，这样就一步一步比较严谨的做好了我们的安全区适配。

具体代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
复制代码

微信内嵌H5适配安全区

首先，微信内嵌的H5是支持横屏、竖屏的。所以我们要写响应式，说到响应式，我们就必须想到媒体查询 @media。

其次，我们来分析一下微信内嵌页面，最顶部是有一个导航栏的，底部还有返回和前进的按钮（除第一个页面外，第一个页面不能返回上一页，所以没有底部导航条），如上图。所以我们在做安全区兼容的时候，只判断底部的padding就可以了。 

横屏时和竖屏一样，也需要做底部的兼容，防止第一个页面没有底部导航栏时，出现小黑条遮挡的问题。接下来要兼容左侧的刘海危险区和右侧的危险区。 

 代码实现：

@media all and (orientation : portrait){
 body {
 padding-bottom: constant(safe-area-inset-bottom);
 //constant在iOS<11.2的版本中生效

 padding-bottom: env(safe-area-inset-bottom);
 //env在iOS>=11.2的版本中生效
 }
}

/*横屏*/
@media all and (orientation : landscape) {
 body {
 padding-left: constant(safe-area-inset-left);
 padding-right: constant(safe-area-inset-right);
 padding-bottom: constant(safe-area-inset-bottom);
 //constant在iOS<11.2的版本中生效

 padding-left: env(safe-area-inset-left);
 padding-right: env(safe-area-inset-right);
 padding-bottom: env(safe-area-inset-bottom);
 //env在iOS>=11.2的版本中生效
 }
}
复制代码

记得加上：

html,body {
    height: 100%;
}
复制代码

小程序适配安全区

ios-iphoneX {
    padding-bottom: constant(safe-area-inset-bottom);
             //constant在iOS<11.2的版本中生效
    padding-bottom: env(safe-area-inset-bottom);
             //env在iOS>=11.2的版本中生效
}
复制代码

然后把类ios-iphoneX加到wxml的根元素的class中。
由于小程序不支持横屏，以及小程序的导航条会自动适配刘海屏，所以我们只需要考虑手机底部的小黑条就可以了。

iPhone/iPad 横屏字体变大

最严谨的解决办法：加一个属性

-webkit-text-size-adjust: 100%;
复制代码

来解释一下-webkit-text-size-adjust这个属性：

CSS3中存在很多特别高级的属性，但是仅支持webkit内核。其中text-size-adjust就是这些高级属性之一，所以我们在使用这个属性时，需要加一个前缀-webkit，并且这个属性仅在移动设备上生效。

-webkit-text-size-adjust: auto        //默认取值，文本大小根据设备尺寸进行调整。
-webkit-text-size-adjust: none;        //文本大小不会根据设备尺寸进行调整。
-webkit-text-size-adjust: 百分比;       //字体大小为原本字体大小的百分比。
复制代码

在开发页面时，为了提升用户体验，我们需要积极地去使用一些功能强大的webkit特有属性。这也符合页面开发人员一直遵循的“渐进增强，优雅降级”的理念。