移动端适配js,整理之:
(function(doc,win){var docEl=doc.documentElement,resizeEvt='orientationchange'in window?'orientationchange':'resize',recalc=function(){var clientWidth=docEl.clientWidth;if(!clientWidth)return;docEl.style.fontSize=10*(clientWidth/320)+'px';};if(!doc.addEventListener)return;win.addEventListener(resizeEvt,recalc,false);doc.addEventListener('DOMContentLoaded',recalc,false);})(document,window);
复制引入即可
2016年4月22日更新,在pc端打开,布局模块会巨大,做了判断,在宽度大的设备上,设个阀值,当大于这个宽度,则字体不会进行放大,预想应该是这个样子:
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if ((10 * (clientWidth / 320)) <= 20) {
docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';
}else{
docEl.style.fontSize = 20 + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);