Widely available Supported across all major browsers. Safe to use in production.

Visual viewport API

The VisualViewport interface of the CSSOM view API represents the visual viewport for a given window. For a page containing frames, each <iframe> , as well as the containing page, will have a unique window object. Each window on a page will have a unique VisualViewport representing the properties associated with that window.

EventTarget VisualViewport

Display and Navigation

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
VisualViewport
61
79
91
13
61
13
height

The height read-only property of the VisualViewport interface returns the height of the visual viewport, in CSS pixels, or 0 if current document is not fully active.
61
79
91
13
61
13
offsetLeft

The offsetLeft read-only property of the VisualViewport interface returns the offset of the left edge of the visual viewport from the left edge of the layout viewport in CSS pixels, or 0 if current document is not fully active.
61
79
91
13
61
13
offsetTop

The offsetTop read-only property of the VisualViewport interface returns the offset of the top edge of the visual viewport from the top edge of the layout viewport in CSS pixels, or 0 if current document is not fully active.
61
79
91
13
61
13
pageLeft

The pageLeft read-only property of the VisualViewport interface returns the x coordinate of the left edge of the visual viewport relative to the initial containing block origin, in CSS pixels, or 0 if current document is not fully active.
61
79
91
13
61
13
pageTop

The pageTop read-only property of the VisualViewport interface returns the y coordinate of the top edge of the visual viewport relative to the initial containing block origin, in CSS pixels, or 0 if current document is not fully active.
61
79
91
13
61
13
resize_event

The resize event of the VisualViewport interface is fired when the visual viewport is resized. This allows you to position elements relative to the visual viewport as it is zoomed, which would normally be anchored to the layout viewport.
62
79
91
13
62
13
scale

The scale read-only property of the VisualViewport interface returns the pinch-zoom scaling factor applied to the visual viewport, or 0 if current document is not fully active, or 1 if there is no output device.
61
79
91
13
61
13
scroll_event

The scroll event of the VisualViewport interface is fired when the visual viewport is scrolled. This allows you to position elements relative to the visual viewport as it is scrolled, which would normally be anchored to the layout viewport.
62
79
91
13
62
13
scrollend_event

The scrollend event of the VisualViewport interface is fired when a scrolling operation on the visual viewport ends. This allows you to update an element when a scrolling action is completed. For example, you could use the VisualViewport/resizeevent and VisualViewport/scrollevent events to keep an element fixed to the visual viewport as it is pinch-zoomed…
126
126
150
126
width

The width read-only property of the VisualViewport interface returns the width of the visual viewport, in CSS pixels, or 0 if current document is not fully active.
61
79
91
13
61
13
visualViewport

The visualViewport read-only property of the Window interface returns a VisualViewport object representing the visual viewport for a given window, or null if current document is not fully active.
61
79
91
13
61
13
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (62)
Implementation note
  • The `onresize` event handler property is not supported.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (62)
Implementation note
  • The `onresize` event handler property is not supported.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (62)
Implementation note
  • The `onscroll` event handler property is not supported.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (62)
Implementation note
  • The `onscroll` event handler property is not supported.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (126)
Implementation note
  • The `onscrollend` event handler property is not supported. See bug 325307785.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (126)
Implementation note
  • The `onscrollend` event handler property is not supported. See bug 325307785.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (126)
Implementation note
  • The `onscrollend` event handler property is not supported. See bug 325307785.

Use cases

  • Using Visual viewport API

    The VisualViewport interface of the CSSOM view API represents the visual viewport for a given window.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links