Skip to content

sizing.md

Latest commit

 

History

History
67 lines (40 loc) · 3.82 KB

sizing.md

File metadata and controls

67 lines (40 loc) · 3.82 KB

Sizing

There are various ways to try and read the size of the viewport/window.

window.innerWidth and window.innerHeight

Definition

window.innerWidth and window.innerHeight are defined in the CSSOM View Module:

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

The following snippet shows how to obtain the width of the viewport:

var viewportWidth = innerWidth

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

Findings

💡 These findings are a textual representation of the test results table.

In all browsers the innerHeight and innerWidth behave as defined/expected.

When pinch-zooming in, WebKit adjusts these values as you pich-zoom in on the page, taking over the width/height of the Visual Viewport

window.outerWidth and window.outerHeight

Definition

window.outerWidth and window.outerHeight are defined in the CSSOM View Module:

The outerWidth attribute must return the width of the client window. If there is no client window this attribute must return zero.

The outerHeight attribute must return the height of the client window. If there is no client window this attribute must return zero.

Findings

💡 These findings are a textual representation of the test results table.

On Desktop all is pretty straigthforward and the outerHeight equals the innerHeight + the size of the browser’s top and bottom bars.

On Mobile it’s a different story:

  • Only Safari on iOS and Chrome on iOS see the outerHeight as the (unzoomed 1) innerHeight + size of the browser’s chrome. Essentially this equals the screen’s height here, as apps run fullscreen on such devices.
  • Most other mobile browsers use the values from innerHeight as the value for its outerHeight. When the UA UI Toolbars retract, both sizes get adjusted. This seems wrong.
  • Firefox on Android does something special where the outerHeight is a value somewhere in between the Small Viewport (innerHeight when UA UI is expanded) and Large Viewport (innerHeight when UA UI is retracted).

document.documentElement.clientWidth and document.documentElement.clientHeight

document.documentElement.clientWidth and document.documentElement.clientHeight can be used to measure the ICB. This due to an exception in the definition of clientWidth/clientWidth:

If the element is the root element and the element’s node document is not in quirks mode […] return the viewport width/height excluding the size of a rendered scroll bar (if any).

Element.getBoundingClientRect()

If no other way of getting the dimensions of an element is available, Element.getBoundingClientRect() can be used.

The getBoundingClientRect() method, when invoked on an element element, must return the result of getting the bounding box for element.

Beware that calling this, causes layout (citation needed)

Footnotes

  1. When specs talk about “the Viewport”, they mean the Layout Viewport. ↩ ↩2 ↩3