由淘宝前端的一篇rem的文章（点击前去），得知安卓4.0以下的版本浏览器，浏览器可见区域宽度与实际不符（如文中的例子，中兴U930手机上物理分辨率宽度为540px（window.outerWidth）, 页面可见区域宽度值为360px（window.innerWidth）, 而实际页面可利用的宽度为400px左右），而引出了另一个问题，js中能够获取到各种宽度的方式，和各种宽度代表的意义。
综合下表，（在不考虑低版本安卓浏览器 页面可视区域js取得的值与实际可利用区域不符的情况）我们设置根字体大小（用于rem）使用页面宽度的1/10，在不主动改变滚动条样式的情况下，页面宽度使用document.ducumentElement.clientWidth，若需改动滚动条样式则判断为webkit内核的手机浏览器 的情况下使用window.innerWidth
| 通常意义 | pc浏览器 | 手机浏览器 | |
|---|---|---|---|
| screen.width | 屏幕宽度 | 屏幕逻辑像素宽度，windows屏幕分辨率1920*1080时是1920 | 例如iphone6是375 |
| window.outerWidth | 页面视图容器的大小 | 包含可见区域宽度+滚动条的宽度+(chrome 16px)（firefox 12px）? | 同screen.width,例如iphone6是375 |
| window.innerWidth | 页面可见区域的大小（包含滚动条） | 包含可见区域宽度+滚动条的宽度(chrome 16px,firefox 17px) | 若在webkit浏览器中改变了默认滚动条样式，此宽度不包含滚动条宽度； 若使用默认滚动条样式 为可见区域宽度（手机浏览器中滚动条一般会自动隐藏或透明悬浮不会影响页面展示）,例如iphone6是375 |
| document.documentElement.clientWidth | 页面可见区域的大小 | 包含可见区域宽度 | 此宽度会变化？？如下图 若在webkit浏览器中改变了默认滚动条样式，在html页面的script标签中打印时，此宽度不包含滚动条宽度，在浏览器控制台 手动输出document.ducumentElement.clientWidth时，输出值包含滚动条宽度； 若使用默认滚动条样式，则同window.innerWidth,例如iphone6是375 |
| document.body.clientWidth | body的大小 | body区域宽度 | body区域宽度 |
网友评论