开发H5网页适配各种机型的办法

开发h5网页的时候往往会遇到网页不兼容，手机机型适配混乱的问题。

解决方案如下：

首先需要在页头增加h5兼容meta行：

<meta name="x5-fullscreen" content="true">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
           

关于每个手机的像素都不一样，导致px在不同机型上面显示占比差异；

可以将rem代替px来使用，根据手机屏幕的大小，使用rem转化为对应的手机屏幕占比的px，首先需要在页头增加：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px';
           

当加上这句代码时，不同机型，作用于html最外层标签将会产生如下效果：

通过上图可发现根据不同机型，在最外层的html里会增加对应占比屏幕宽度的px；

这个时候在给元素定义宽度高度时可以使用rem了，比例为1rem = 100px；

这个时候保证了元素占比一致，无论任何机型，页面产生的效果都是我们想要的，不会出现适配错误的情况。