Skip to content

Instantly share code, notes, and snippets.

@erin-dot-io

erin-dot-io/resizer_bookmarklet.js

Created September 24, 2014 19:15
Show Gist options
  • Save erin-dot-io/6c94d2d89a34be4b2e7f to your computer and use it in GitHub Desktop.
Save erin-dot-io/6c94d2d89a34be4b2e7f to your computer and use it in GitHub Desktop.
Download ZIP
iPhone 6 Viewport Resizer Bookmarklet
Raw
resizer_bookmarklet.js
javascript:void((function(d){if(self!=top||d.getElementById('toolbar')&&d.getElementById('toolbar').getAttribute('data-resizer'))return false;d.write('<!DOCTYPE HTML><html style="opacity:0;"><head><meta charset="utf-8"></head><body><a data-viewport="320x480" data-icon="mobile" title="Mobile (e.g. Apple iPhone)">Mobile (e.g. Apple iPhone)</a><a data-viewport="320x568" data-icon="mobile" data-version="5" title="Apple iPhone 5">Apple iPhone 5</a><a data-viewport="375x667" data-icon="mobile" data-version="6" title="Apple iPhone 6">Apple iPhone 6</a><a data-viewport="414x736" data-icon="mobile" data-version="6+" title="Apple iPhone 6 Plus">Apple iPhone 6 Plus</a><a data-viewport="768x1024" data-icon="tablet" title="Tablet (iPad 2-3rd, mini)">Tablet (iPad 2-3rd, mini)</a><a data-viewport="1366x583" data-icon="notebook" data-version="11" title="Macbook Air 11-inch (Viewable Area)">Macbook Air 11-inch (Viewable Area)</a><a data-viewport="1440x715" data-icon="notebook" data-version="13" title="Macbook Air 13-inch (Viewable Area)">Macbook Air 13-inch (Viewable Area)</a><script src="http://lab.maltewassermann.com/viewport-resizer/resizer.min.js"></script></body></html>')})(document));
@erin-dot-io
Copy link
Author

This is a custom version of Malte Wassermann's awesome Viewport Resizer with accurate viewport sizes for the iPhone 6 and iPhone 6 Plus.

Use:

Bookmark or drag the below link into your bookmarks bar...

↔ Resizer

... then edit the bookmark and replace the bookmark's URL field with the code from the above gist, making sure it's all on one line!

(we all know how bookmarklets work at this point, right??)

TL;DR:

The iPhone 6 Plus viewport is based off the native resolution reported by the hardware (2208 × 1242 @3x), not the physical pixel dimensions of the iPhone 6 Plus (1920 x 1080). The reason for this being that the 1920 x 1080 resolution of the iPhone does not easily scale or translate to the pixel, or "point" dimensions reported by desktop browsers, and is actually scaling down everything on screen by about 87%, as if you were using the "zoom-out" function built into most desktop browsers.

So what I use in this bookmarklet is:

iPhone 6: 1334 x 750 pixels, divided by 2 (@2x) = 375 x 667 points (or non-retina pixels)
iPhone 6 Plus: 2208 x 1242 pixels, divided by 3 (@3x) = 414 x 736 points (or non-retina pixels)

I've also included Macbook Air 11" and 13" viewport size approximations, taking into consideration that the OS and browser UI both take up additional vertical space, meaning the viewport here is less than the full vertical width of those displays. (Thanks to xScope's Screens tool, which these dimensions are based off of.)

TODO:

Provide iPhone viewport sizes that consider the vertical space occupied by Safari's UI.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment