Skip to main content

screen

Screen and viewport dimensions, orientation, and Fullscreen API helpers.

Import: @rtorcato/browser-common/screen

📖 MDN: Screen · 📊 caniuse: fullscreen

Browser support​

APIChromeEdgeFirefoxSafariiOS SafariBaseline
Screen✅ 1+✅ 12+✅ 1+✅ 1+✅ 1+Widely available
Element.requestFullscreen✅ 71+✅ 79+✅ 64+✅ 16.4+◐ partial 16.4+ [1,2]Limited
  1. iOS Safari: Only available on iPad, not on iPhone.
  2. iOS Safari: Shows an overlay button which can not be disabled. Swiping down exits fullscreen mode, making it unsuitable for some use cases like games.

✅ supported · ◐ partial · ❌ not supported · [n] see note. Generated from MDN browser-compat-data and web-features. caniuse: Screen · Element.requestFullscreen

Example​

import {
  getScreenWidth,
  getViewportWidth,
  isLandscape,
  enterFullscreen,
  exitFullscreen,
  isFullscreen,
} from '@rtorcato/browser-common/screen'

const w = getScreenWidth()
if (isLandscape()) renderWide()

button.addEventListener('click', () => {
  if (isFullscreen()) {
    exitFullscreen()
  } else {
    enterFullscreen()
  }
})

Exports​

  • getScreenWidth() — screen width in pixels, or undefined outside a browser
  • getScreenHeight() — screen height in pixels, or undefined outside a browser
  • getViewportWidth() — viewport width (window.innerWidth), or undefined outside a browser
  • getViewportHeight() — viewport height (window.innerHeight), or undefined outside a browser
  • isLandscape() — true if viewport is wider than tall
  • isPortrait() — true if viewport is taller than or equal to wide
  • enterFullscreen(element?) — requests fullscreen for an element (defaults to document.documentElement)
  • exitFullscreen() — exits fullscreen if active
  • isFullscreen() — true if the document currently has a fullscreen element

See the API reference for full signatures.