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

Question

看了阿里等一些响应的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();

Answer 1

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