# desktop-viewport > Hastily makes desktop browsers respect the viewport setting Latest version **1.2.6** (published 2017-03-06) · MIT license · 0 weekly downloads ## Install ```sh npm install desktop-viewport pnpm add desktop-viewport yarn add desktop-viewport bun add desktop-viewport ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.2.6 | | Published | 2017-03-06 | | First published | 2017-03-02 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 12 | | Known vulnerabilities | 0 | | Install scripts | yes | | GitHub stars | 4 | | Author | Laura mayhem | | Maintainers | walaura | | Keywords | es6, frontend, javascript, responsive | ## Links - npm: https://www.npmjs.com/package/desktop-viewport - Repository: https://github.com/walaura/desktop-viewport - Homepage: https://github.com/walaura/desktop-viewport#readme - Issues: https://github.com/walaura/desktop-viewport/issues - npm.io page: https://npm.io/package/desktop-viewport ## Dependencies (12) - [gulp](https://npm.io/package/gulp.md) ^3.9.1 - [webpack](https://npm.io/package/webpack.md) ^2.2.1 - [fs-extra](https://npm.io/package/fs-extra.md) ^2.0.0 - [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.8 - [babel-core](https://npm.io/package/babel-core.md) ^6.11.4 - [babel-loader](https://npm.io/package/babel-loader.md) ^6.2.4 - [webpack-merge](https://npm.io/package/webpack-merge.md) ^3.0.0 - [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.2.0 - [gulp-mocha-phantomjs](https://npm.io/package/gulp-mocha-phantomjs.md) ^0.12.0 - [document-ready-promise](https://npm.io/package/document-ready-promise.md) ^3.0.1 - [wrapper-webpack-plugin](https://npm.io/package/wrapper-webpack-plugin.md) 0.1.11 - [babel-plugin-transform-object-assign](https://npm.io/package/babel-plugin-transform-object-assign.md) ^6.22.0 ## Recent versions - 1.2.6 (latest) — 2017-03-06 - 1.2.5 — 2017-03-06 - 1.2.4 — 2017-03-06 - 1.2.3 — 2017-03-06 - 1.2.2 — 2017-03-06 - 1.2.1 — 2017-03-06 - 1.2.0 — 2017-03-06 - 1.1.2 — 2017-03-02 - 1.1.1 — 2017-03-02 - 1.1.0 — 2017-03-02 - 1.0.4 — 2017-03-02 - 1.0.3 — 2017-03-02 - 1.0.2 — 2017-03-02 - 1.0.1 — 2017-03-02 - 1.0.0 — 2017-03-02 - … 1 more at https://npm.io/package/desktop-viewport/versions ## README # desktop-viewport Hastily makes desktop browsers respect the viewport setting so they'll scale up and down everything to a given window size
## Usage (browser) Grab the [latest release](https://github.com/walaura/desktop-viewport/releases) and drop it in as a script tag. Just add it to your page, wrap everything on a div id'd `#container` and have a viewport tag on ``. Check `test/index.html` for an example!! ## Usage (webpack+babel) Grab the code from here or npm npm install desktop-viewport --save #or# git checkout git@github.com:walaura/desktop-viewport.git npm install & then import desktopViewport from 'desktop-viewport'; desktopViewport(); ## Usage desktop-viewport will attach itself on load, you don't have to do anything. **However** there's extra work for you if you are checking the scroll position via javascript or having dynamically sized elements. * If you are checking the scroll position per element you must multiply it by `desktopViewport.scaleMultiplier` to get the real scroll position * If your page height changes you must call `desktopViewport.rescale()` for the container to resize itself ## API `window.desktopViewport` (or the object returned by the webpack module) has several useful properties such as desktopViewport.scaleMultiplier number containing the scale of the current page desktopViewport.rescale() rescale the viewport and calculate the height again. you can pass in a parameter with a new viewport width desktopViewport.init() if you aren't autoloading you must call this for anything to happen ## Options You can pass options to `desktopViewport` either on the function initializer (webpack) or by creating a `window.desktopViewportSettings` object before loading `desktop-viewport.min.js` (browser) window.desktopViewportSettings = { container: '#container', /*css selector for the container element*/ viewport: 'viewport', /*viewport width. number or 'viewport' to autodetect it*/ autoLoad: true /*automatically bind it on pageload*/ } --- _Source: https://npm.io/package/desktop-viewport · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._