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

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));

阅读 4.1k
3 个回答

重写文件,

(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);

在iframe里获取父页面宽高要加个window.parent.innerWidth

为什么不用bootstrap呢?

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