window.innerWidth vs document.documentElement.clientWidth

☆樱花仙子☆ 提交于 2019-11-27 17:37:05

According to the W3C specification (17 March 2016):

The innerWidth attribute must return the viewport width including the size of a rendered scroll bar (if any), or zero if there is no viewport.

...

The clientWidth attribute must run these steps:

  1. If the element has no associated CSS layout box or if the CSS layout box is inline, return zero.
  2. If the element is the root element and the element's document is not in quirks mode, or if the element is the HTML body element and the element's document is in quirks mode, return the viewport width excluding the size of a rendered scroll bar (if any).
  3. Return the width of the padding edge excluding the width of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms that apply to the element and its ancestors.
mrgoos

I am using this:

    window.innerWidth && document.documentElement.clientWidth ? 
Math.min(window.innerWidth, document.documentElement.clientWidth) : 
window.innerWidth || 
document.documentElement.clientWidth || 
document.getElementsByTagName('body')[0].clientWidth;

It covers cases where the scrollbar is not taken into consideration and has mobile support.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!