用rem布局,在安卓app中浏览页面样式乱了,好像是rem没生效,有啥解决办法?

function rem(win, doc){
            function setFontSize() {
                var winWidth =  window.innerWidth;
                var size = (winWidth / 640) * 100;
                doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;
            }

            var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';

            var timer = null;

            win.addEventListener(evt, function () {
                clearTimeout(timer);

                timer = setTimeout(setFontSize, 300);
            }, false);

            win.addEventListener("pageshow", function(e) {
                if (e.persisted) {
                    clearTimeout(timer);

                    timer = setTimeout(setFontSize, 300);
                }
            }, false);

            setFontSize();

            console.log('page loaded')
        };
        window.onload = rem(window, document);

目前这样写还是有问题,rem的布局没生效

阅读 7k
7 个回答

$(window).on("resize",function(){
$("html").css("fontSize",$(window).width()/6.4);
}).resize();

(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 = (clientWidth >= 640 ? 100 : clientWidth / 6.4) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

这样写,1rem=100px

不生效是什么效果?截个图贴上来吧

字体大小最小是12px,所以

var size = (winWidth / 640) * 100;
doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;

你的这两句代码就有问题了!建议你size值改到12及以上

我一般用的是这个

        (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 = 20 * (clientWidth / 320) + 'px';
            };

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

是用安卓原生浏览器吗?是的话就坑了。。。。
clipboard.png

新手上路,请多包涵

我好像也遇到了这个问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题