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

Object
  • 2.7k

看了阿里等一些响应的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.3k
1 个回答

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

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

宣传栏