viewport-dimensions

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
viewport-dimensions
0.2.07 years ago7 years agoMinified + gzip package size for viewport-dimensions in KB

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).