为什么移动响应flexible组件不直接使用window.screen.width

Object
  • 2.8k

看了阿里等一些响应的viewport解决方案

里面都是应用的document.documentElement.getBoundingClientRect().width来计算rem大小

不明白这里的计算这些作用,是为了做rem来计算所有容器字体等的大小宽度吗?

我目前有一个自己小单页,我直接用了window.screen.width/375(iphone6大小来等比计算),
自动注入veiwport,计算

代码如下,不知道这样做会有什么不好的效果:

function newScale(){
    var docEl = document.documentElement;

    metaEl = document.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'width=375, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
    docEl.firstElementChild.appendChild(metaEl);

    scale = 1;
    if (window.screen.width != 375) {
        scale = window.screen.width / 375;
    }

    metaEl.setAttribute('content',  'width=375, initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale+', user-scalable=no');
}
newScale();
回复
阅读 1.6k
1 个回答

电脑端浏览器可以拖动大小,手机 pad上也有可能分屏,所以不能直接用屏幕大小

宣传栏