移动端页面兼容要求

兼容微信、手Q、UC浏览器，如果是游戏APP内置页面，必须兼容游戏对应的MSDK浏览器。

兼容安卓4.4及以上、iOS最新版本，页面能正常预览，无错位。

检查视频、音频是否正常播放；涉及自动播放的视频H5，推荐使用移动端视频组件

页面不需要强制横/竖屏时，可根据实际需求，在屏幕旋转时候给予提示

 移动端必须加此样式，防止浏览器自动调整字体影响布局

-webkit-text-size-adjust: none;

px布局

设计稿是640就填640、750设计稿就填750,正常按实际像素px布局即可。

<meta name="viewport" content="width=750,minimum-scale=0,maximum-scale=5,user-scalable=no"/>

REM布局

规范只列举了rem布局这一种适配方式，但不是说限制只能用这种布局方式。 无论用何种方式，需要保证在不同比例、不同尺寸的手机上，测试微信、手Q、safari、UC等主流浏览器无明显错位、变形。

不管你拿到的设计稿宽度是640px还是750px，多大都一样。和我们平时做PC页面的做法基本一样，

只需要把单位px换算成rem，所有设计稿的的元素大小全除以100单位换成rem，

例如设计稿上个某个文字的大小为30px，直接写font-size:0.3rem。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script> 
    //屏幕适应 
    (function (win, doc) {
        if (!win.addEventListener) return;
        var html = document.documentElement;
        function setFont() {
            var html = document.documentElement;
            var k = 750;//设计稿是640就填640、750设计稿就填750
            html.style.fontSize = html.clientWidth / k * 100 + "px";
        }
        setFont();
        setTimeout(function () {
            setFont();
        }, 300);
        doc.addEventListener('DOMContentLoaded', setFont, false);
        win.addEventListener('resize', setFont, false);
        win.addEventListener('load', setFont, false);
    })(window, document);
</script>