多终端适配
<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,内部内容撑开大于外层容器高度即可.