兼容性优化,移动端适配处理

多终端适配

<script>
        // 移动端多设备适配处理
        (function (doc, win) {
            // 所有html
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                // 设计稿的宽度
                designWidth = 750,
                calc = function () {
                    // 整体宽度
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    // 适配pc端
                    if (clientWidth > 677) {
                        clientWidth = 677;
                        $('.layui-layer-content').css('min-width', '477px')
                    }
                    docEl.style.fontSize = 40 * (clientWidth / designWidth) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, calc, false);
            doc.addEventListener('DOMContentLoaded', calc, false);
        })(document, window);
    </script>

​

要兼容微信PC---需要设置对应标签的外层容器如下（https://weixin.sogou.com/ 推荐一个搜狗微信网站，F12开发者模式你值得查看！！！）

​

兼容补充

最小高度可以自动适配所有设备,终端不变形!!!

​​

苹果手机滚动fixed页面兼容性处理

-webkit-overflow-scrolling:touch,overflow-y:auto,内部内容撑开大于外层容器高度即可.

​​