响应式布局部分安卓手机无法解析问题

问题描述

问 题

1.我在代码中加入了如下代码，进行响应式布局，但是在部分安卓手机上，如华为等，并没有成功实现响应式布局，出现文字很大的情况，如果在setFontSize()外面使用了alert，所有问题都解决了，可以实现华为上面的响应布局，求问，如何解决这个问题啊。。
加入在一个div中嵌套了一个iframe，那么window.innerWidth获取的事iframe的宽度还是本省手机的宽度？

!(function(win, doc){

function setFontSize() {
    var winWidth =  window.innerWidth;
    doc.documentElement.style.fontSize = (winWidth / 640) * 10 *2 + 'px' ;
}

//alert（0）;

var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
//转屏
win.addEventListener(evt, function () {
    clearTimeout(timer);
   
    timer = setTimeout(setFontSize, 300);
}, false);
//pageshow,缓存相关
win.addEventListener("pageshow", function(e) {
    if (e.persisted) {
        clearTimeout(timer);
       
       timer = setTimeout(setFontSize, 300);
    }
}, false);
setFontSize();

}(window, document));

解决方案

重写文件，

(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*2 * (clientWidth / 750) + 'px';
    };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);
function setfont (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*2 * (clientWidth / 750) + 'px';
    };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);

}

window.onload=setfont(document, window);

这篇关于响应式布局部分安卓手机无法解析问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！