JSPM

viewport-dimensions

0.2.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 172017
  • Score
    100M100P100Q166748F
  • License MIT

Simple utility for watching and retrieving browser viewport width, height, vmin and vmax

Package Exports

  • viewport-dimensions

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (viewport-dimensions) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Travis CI status Coveralls status devDependencies status

Sauce Labs status

Viewport

Simple utility for watching and retrieving browser viewport width, height, vmin and vmax.

documentElement.clientWidth is used (rather than window.innerWidth), so reported viewport dimensions will exclude scrollbar dimensions.

Install

Bower

bower install -S viewport-dimensions

npm

npm i -S viewport-dimensions

(One object is exported:)

var viewport = require('viewport');

API

#width()

Returns {number} - Browser viewport width.

viewport.width(); // (e.g.) 1024

#height()

Returns {number} - Browser viewport height.

viewport.height(); // (e.g.) 768

#max()

Returns {number} - Maximum browser dimension (width/height).

viewport.max(); // (e.g.) 1024

#min()

Returns {number} - Minimum browser dimension (width/height).

viewport.height(); // (e.g.) 768

#setDimensions()

Set internal dimension references to current browser viewport width and height.

viewport.setDimensions();

Environment

Won't generate errors if run server-side, but won't do anything too useful either.

Development

  1. Clone repo and npm install
  2. Make changes and ensure linting (gulp lint) & tests (gulp test) pass (combined task: gulp dev)
  3. Create distributable files (gulp dist) - combined dev + dist task: gulp

Use gulp watch to run linter and tests on each file change (equivalent to manually running gulp dev).