Browser Object Model: The Window object

The Window object inherits from EventTarget.

The Window object has one instance, named window.

Properties and Methods

`alert()`
`applicationCache`	Deprecated
`back()`	Non-Standard, Deprecated
`blur()`
`cancelAnimationFrame()`	Experimental
`cancelIdleCallback()`
`captureEvents()`	Non-Standard
`clearImmediate()`
`close()`
`closed`
`confirm()`
`console`	The `console` object.
`convertPointFromNodeToPage()`	Non-Standard
`convertPointFromPageToNode()`	Non-Standard
`createImageBitmap()`	Creates an instance of an `ImageBitmap` from one of the following sources: `HTMLImageElement`, `SVGImageElement`, `HTMLVideoElement`, `HTMLCanvasElement`, `Blob`, `ImageData`, `ImageBitmap`, `OffscreenCanvas`, `VideoFrame`.
`customElements`	Returns a `CustomElementRegistry` interface.
`defaultStatus`	Deprecated
`devicePixelRatio`	Number of physical pixels that represent a logical (or CSS) pixel. The value 1 represents a classic 96 DPI display, 2 is expected for HiDPI/Retina displays. See also the method `WebGLRenderer.setPixelRatio()` in three.js.
`dialogArguments`	Deprecated
`document`
`dump()`	Non-Standard
`event`
`fetch()`	Returns a `Response` object. Part of the Fetch API. (See demonstration of the asynchronicity of fetch())
`find()`	Non-Standard
`focus()`
`forward()`	Non-Standard, Deprecated
`frameElement`
`frames`
`fullScreen`	Non-Standard
`getComputedStyle()`
`getDefaultComputedStyle()`
`getSelection()`
`history`	A reference to a `History` object
`innerHeight` and `innerWidth`	return the size of the browser-window's visual viewport.
`length`
`localStorage`, `sessionStorage`	References to `Storage` objects
`location`	See also `Node.baseURI` and `document.documentURI`.
`locationbar`, `personalbar`, `scrollbars`	References to `BarProp` objects.
`matchMedia()`	TODO: This method seems to be somehow related to the `@media` CSS at-rule.
`menubar`
`Methods`
`moveBy()`
`moveTo()`
`mozInnerScreenX`
`mozInnerScreenY`
`mozPaintCount`	Non-Standard, Deprecated
`name`
`navigator`	A reference to a `Navigator` object
`ondragdrop`	Deprecated
`open()`
`openDialog()`	Non-Standard
`opener`
`outerHeight`
`outerWidth`
`pageXOffset`, `pageYOffset`, `scrollX`, `scrollY`	`pageXOffset` is an alias for `scrollX`, `pageYOffset` an alias for `scrollY`.
`parent`	A reference to (another?) `Window` object
`postMessage()`
`print()`
`prompt()`
`PublicKeyCredential`	See also `navigator.credentials`
`releaseEvents()`	Non-Standard
`requestAnimationFrame()`
`requestFileSystem()`	Non-Standard, Deprecated
`requestIdleCallback()`
`resizeBy()`
`resizeTo()`
`screen`	A reference to a `Screen` object
`screenLeft`, `screenTop`, `screenX`, `screenY`	`screenLeft` is an alias for `screenX`, `screenTop` an alias for `screenY`. The values correspond to the vertical/horizontal distance, measured in CSS pixels, from the browser's viewport to the edges of the screen.
`scroll()`
`scrollBy()`
`scrollByLines()`	Non-Standard
`scrollByPages()`	Non-Standard
`scrollMaxX`	Non-Standard
`scrollMaxY`	Non-Standard
`scrollTo()`
`self`	A (`WindowProxy`) reference to the `window` instance. Compare with `WorkerGlobalScope.self`.
`setImmediate()`	Non-Standard
`showDirectoryPicker()`
`showModalDialog()`	Deprecated
`showOpenFilePicker()`
`showSaveFilePicker()`
`sidebar`	Non-Standard
`sizeToContent()`
`speechSynthesis`
`status`
`statusbar`
`stop()`
`toolbar`
`top`
`updateCommands()`
`visualViewport`	The Visual Viewport WebAPI, viewports in mobile browsers.
`window`

Events

`afterprint`
`appinstalled`
`beforeinstallprompt`
`beforeprint`
`beforeunload`
`blur`
`copy`
`cut`
`devicemotion`
`deviceorientation`	See also the `OrientationSensor` and`DeviceOrientationEvent` interfaces.
`deviceorientationabsolute`
`error`
`focus`
`gamepadconnected`
`gamepaddisconnected`
`hashchange`
`languagechange`
`load`
`message`
`messageerror`
`offline`
`online`
`orientationchange`	Deprecated
`pagehide`
`pagereveal`
`pageshow`
`pageswap`
`paste`
`popstate`
`rejectionhandled`
`resize`
`scrollsnapchange`	Experimental
`scrollsnapchanging`	Experimental
`storage`
`unhandledrejection`
`unload`	Deprecated
`vrdisplayactivate`	Non-standard, Deprecated
`vrdisplayconnect`	Non-standard, Deprecated
`vrdisplaydeactivate`	Non-standard, Deprecated
`vrdisplaydisconnect`	Non-standard, Deprecated
`vrdisplaypresentchange`	Non-standard, Deprecated

Scrolling

window.scrollX and window.scrollY indicate the amount in pixels that the document is scrolled horizontally and vertically. window.pageXOffset and window.pageYOffset are aliases for window.scrollX and window.scrollY.

The properties .scrollColumn and .scrollTow set or get the left-most column or top-most row in a pane or window.

Relative scrolling is possible for example with

activeWindow.smallScroll Down    := 105
activeWindow.largeScroll toRight :=   2

devicePixelRatio

window.devicePixelRatio corresponds to the ratio of the resolution of physical pixels to the resolution of CSS pixel. For example, a value of 2 indicates that 100 CSS pixels correspond to 200 device pixels. Thus, devicePixelRatio increasess when a page is zoomed in.

pinch-zooming does not affect the value of devicePixelRatio, however.

The following example tries to demonstrate the effect of devicePixelRatio to the displayed size of CSS elements:

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>window.devicePixelRatio</title>

   <style type='text/css'>

      body {
         margin: 0;
         background-color: #f4f0e8;
         color: #1f2933;
         font-family: sans-serif;
      }

      #stage {
         max-width: 408px;
         margin: 48px auto;
      }

      #stage p {
         line-height: 1.45;
      }

      #rectangle {
         width: 400px;
         height: 180px;
         border: 4px solid #204a87;
         background:
            linear-gradient(135deg, rgba(32, 74, 135, 0.18), rgba(138, 226, 52, 0.26)),
            repeating-linear-gradient(
               90deg,
               rgba(255, 255, 255, 0.0 )    0,
               rgba(255, 255, 255, 0.0 ) 76px,
               rgba(255, 255, 255, 0.45) 76px,
               rgba(255, 255, 255, 0.45) 77px
            );
         box-sizing: border-box;
      }

      #rectangle-label {
         width: 400px;
         margin-top: 10px;
         color: #52606d;
         font-size: 14px;
         letter-spacing: 0.04em;
      }

      #ratio-out {
         width: 400px;
         margin-top: 22px;
         padding: 18px 20px;
         border: 2px solid #102a43;
         border-radius: 10px;
         background-color: #ffffff;
         box-sizing: border-box;
      }

      #ratio-title {
         display: block;
         margin-bottom: 8px;
         color: #486581;
         font-size: 13px;
         font-weight: bold;
         letter-spacing: 0.08em;
      }

      #ratio-value {
         font-size: 32px;
         font-weight: bold;
      }

   </style>

   <script type='text/javascript'>

      var ratio_value_out;
      var ratio_media_query;

      function update_ratio() {
         ratio_value_out.innerText = window.devicePixelRatio.toFixed(3);
      }

      function main() {
         ratio_value_out = document.getElementById('ratio-value');

         update_ratio();
         window.addEventListener('resize', update_ratio);
      }

   </script>

</head>
<body onload='main()'>

   <div id='stage'>
      <p>
         The rectangle below is styled to stay exactly <b>400 CSS pixels</b> wide.
         Changing the browser zoom level modifies <code>window.devicePixelRatio</code>
         while the CSS width stays the same.
      </p>

      <div id='rectangle'></div>
      <div id='rectangle-label'>Rectangle width: 400 CSS px</div>

      <div id='ratio-out'>
         <span id='ratio-title'>Current device pixel ratio</span>
         <span id='ratio-value'></span>
      </div>
   </div>

</body>
</html>

Github repository Browser-Object-Model, path: /window/devicePixelRatio.html

Browser Object Model: The Window object

Properties and Methods

Events

Scrolling

devicePixelRatio

See also