# adaptive-pixel-perfect > Pixel perfect for multiple resolutions Latest version **0.5.9** (published 2018-05-07) · MIT license · 0 weekly downloads ## Install ```sh npm install adaptive-pixel-perfect pnpm add adaptive-pixel-perfect yarn add adaptive-pixel-perfect bun add adaptive-pixel-perfect ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; large bundle; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.5.9 | | Published | 2018-05-07 | | First published | 2017-04-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 15 | | Unpacked size | 10 MB | | Known vulnerabilities | 0 (+2 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 0 | | Author | orel-s-binoklem | | Maintainers | orel-s-binoklem | | Keywords | pixelperfect, browsersync | ## Links - npm: https://www.npmjs.com/package/adaptive-pixel-perfect - Repository: https://github.com/OrelSBinoklem/adaptive-pixel-perfect - Homepage: https://github.com/OrelSBinoklem/adaptive-pixel-perfect#readme - Issues: https://github.com/OrelSBinoklem/adaptive-pixel-perfect/issues - npm.io page: https://npm.io/package/adaptive-pixel-perfect ## Dependencies (15) - [del](https://npm.io/package/del.md) ^2.2.2 - [diff](https://npm.io/package/diff.md) ^3.2.0 - [gulp](https://npm.io/package/gulp.md) ^3.8.11 - [express](https://npm.io/package/express.md) ^4.14.1 - [through2](https://npm.io/package/through2.md) ^2.0.3 - [socket.io](https://npm.io/package/socket.io.md) ^1.7.3 - [externalip](https://npm.io/package/externalip.md) ^1.0.2 - [gulp-watch](https://npm.io/package/gulp-watch.md) ^4.3.10 - [image-size](https://npm.io/package/image-size.md) ^0.5.1 - [resize-img](https://npm.io/package/resize-img.md) ^1.1.2 - [gulp-changed](https://npm.io/package/gulp-changed.md) ^2.0.0 - [run-sequence](https://npm.io/package/run-sequence.md) ^1.2.2 - [quick-local-ip](https://npm.io/package/quick-local-ip.md) ^1.0.7 - [gulp-image-resize](https://npm.io/package/gulp-image-resize.md) ^0.12.0 - [express-http-proxy](https://npm.io/package/express-http-proxy.md) ^0.11.0 ## 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.5.9 (latest) — 2018-05-07 - 0.5.8 — 2017-11-05 - 0.5.7 — 2017-09-21 - 0.5.6 — 2017-09-20 - 0.5.5 — 2017-08-22 - 0.5.4 — 2017-08-15 - 0.5.3 — 2017-08-15 - 0.5.2 — 2017-08-13 - 0.5.1 — 2017-06-18 - 0.5.0 — 2017-06-17 - 0.4.1 — 2017-06-02 - 0.4.0 — 2017-05-28 - 0.3.3 — 2017-05-02 - 0.3.2 — 2017-04-27 - 0.2.8 — 2017-04-22 - … 13 more at https://npm.io/package/adaptive-pixel-perfect/versions ## README Pixel perfect for multiple resolutions ## Install ```bash $ npm i adaptive-pixel-perfect --save-dev ``` ## Usage ```js a_pp.start(port, designFolder, portForBrowserSync); ``` Use the plugin on port 3010 together with browserSync, (pre-create a design folder and add design images to it): ```js var a_pp = require('adaptive-pixel-perfect').create(); var browserSync = require('browser-sync').create(); var port = 3010; var folderForDesignScreenshots = "design"; var portForBrowserSync = 3000; browserSync.init({ server: "./", cors: true, middleware: function (req, res, next) { res.setHeader('Access-Control-Allow-Origin', '*'); next(); }, socket: { domain: 'localhost:' + portForBrowserSync }, scriptPath: function (path, port, options) { return "http://" + options.getIn(['socket', 'domain']) + path; } }); a_pp.start(port, folderForDesignScreenshots, portForBrowserSync); ``` The plugin will be available at **http://localhost:3010/?a-pp=1** ## Supported key combinations * left mouse button + 1 - 9, 0 (switch between resolutions) * left mouse button + W, A, S, D (change the position of the iframe window) * left mouse button + Z, X, C (site layout, site layout on top of the design, the design) * Ctrl + R + move mouse (resize iframe) ## Release Notes | Release | Notes | | --- | --- | | 0.5.8 | Partial bug fixing with hiding the scroll in a-pp if the real scroll is hidden | | 0.5.6 | Hidden resolutions menu, show press new button. Hidden sizes iframe | | 0.5.5 | Fix escape screenshots of the design in the side and turn off the scroller when reloading browsersync. Fix task sync-thumbnails - add jpeg extension | | 0.5.2 | Added new minify-float stile panels | | 0.5.0 | Delete fast calibrator styles, simplified style, delete flicker function, transfer btn bottom space in global settings, (window deviation screenshots opacity 0.7, hide other window after show deviation window, deviation window draggable) | | 0.4.0 | Added fast calibrator styles | | 0.3.0 | Added a window with settings, added English, moved session groups to the settings window and divided the parameters for more flexible customization | | 0.2.8 | Fixed synchronization select pages | | 0.2.7 | Fixed saving the selected synchronization group | | 0.2.6 | If the user cuts the iframe then the button ceases to be active, but it remains to highlight the "badge". Now in the session, the priority of choosing the resolution or the size as a result of the manual resizing of the iframe | | 0.2.4 | Additing bootom space for close tag body, to be able to scroll down and see in the design which block should be typed as follows. Added the flicker function to make it easier to adjust the block with fuzzy edges under the design | | 0.2.0 | Improved design and made it more appropriate bootstrap. Additing hot-keys | | 0.1.0 | Alpha release | ###Sorry for the hacks and english ## Licence MIT ####Sorry for the hacks and english --- _Source: https://npm.io/package/adaptive-pixel-perfect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._