移动端适配

最新推荐文章于 2025-05-16 10:23:47 发布

原创最新推荐文章于 2025-05-16 10:23:47 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

本文提供了一段JavaScript代码，用于实现网页在不同设备屏幕上的自适应布局。通过监听窗口尺寸变化及文档加载完成事件，调整根元素字体大小，使得内容能根据不同屏幕宽度进行缩放。

(function(doc, win){
    var docE1 = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function(){
            var clientWidth = docE1.clientWidth;
            if(!clientWidth) return;
            docE1.style.fontSize = 18 * (clientWidth / 320) + 'px';            
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt,recalc,false);
    doc.addEventListener('DOMContentLoaded',recalc,false);
})(document,window);