# viewport-dimensions

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

Latest version **0.2.0** (published 2015-09-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install viewport-dimensions
pnpm add viewport-dimensions
yarn add viewport-dimensions
bun add viewport-dimensions
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2015-09-03 |
| First published | 2015-08-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Alex Dunphy |
| Maintainers | alexdunphy |
| Keywords | viewport, browser, window, document, width, height, innerWidth, innerHeight, clientWidth, clientHeight, dimensions, dimension |

## Links

- npm: https://www.npmjs.com/package/viewport-dimensions
- Repository: https://github.com/alexdunphy/viewport
- Issues: https://github.com/alexdunphy/viewport/issues
- npm.io page: https://npm.io/package/viewport-dimensions

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2015-09-03
- 0.1.0 — 2015-08-17

## README

[![Travis CI status](https://img.shields.io/travis/alexdunphy/viewport.svg)](https://travis-ci.org/alexdunphy/viewport)
[![Coveralls status](https://img.shields.io/coveralls/alexdunphy/viewport.svg)](https://coveralls.io/r/alexdunphy/viewport)
[![devDependencies status](https://img.shields.io/david/dev/alexdunphy/viewport.svg)](https://david-dm.org/alexdunphy/viewport#info=devDependencies)

[![Sauce Labs status](https://saucelabs.com/browser-matrix/alexdunphy-viewport.svg)](https://saucelabs.com/u/alexdunphy-viewport)

# 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:)

```javascript
var viewport = require('viewport');
```

## API

### #width()
Returns _{number}_ - Browser viewport width.

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

### #height()
Returns _{number}_ - Browser viewport height.

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

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

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

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

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

### #setDimensions()
Set internal dimension references to current browser viewport width and height.

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

---
_Source: https://npm.io/package/viewport-dimensions · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._