H5在移动端的适配

使用H5写移动端代码时，经常会遇到在PC端显示正常，但到移动端，会出现很多问题。常见问题如下：

• 移动端的双击或者双指缩放会引发整个网页的缩放；
• 整体显示比例太小，和PC端差距大；
• 刘海屏，安全区问题。

问题1&&2解决方法

问题1和2，可以根据对meta标签的配置解决。如下：

<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

将meta标签的name设置为viewport， viewport提供有关视口初始大小的提示，仅供移动设备使用。当name属性为viewport时，其content有如下属性内容。经过上述配置即可解决缩放以及显示比例的问题。

content内容

问题3解决方法

需要在上述meta标签中加入新的属性viewport-fit

<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover"/>

这样整体的网页就会填充屏幕的所有部分。
对于安全区，如果需要留出，可在css中进行设置。env(safe-area-inset-left)和const(safe-area-inset-left)会给出安全区的距离。当然设置在哪里，需要根据整体页面结构来看。

padding-left: env(safe-area-inset-left);
padding-left: const(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-right: const(safe-area-inset-right);
height:env(safe-area-inset-top);
height:constant(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
padding-bottom:constant(safe-area-inset-bottom);