Permalink
Browse files

completely refactored Viewporter to play nicer in edge cases and be m…

…ore fail proof #2
  • Loading branch information...
1 parent 80dbb0a commit 0653c5e6cc44fb89d267a9d6de287febfd7072e6 @pbakaus committed Jan 9, 2012
Showing with 90 additions and 315 deletions.
  1. +21 −15 README.md
  2. +7 −9 demo/lock.html
  3. +4 −6 demo/off.html
  4. +6 −8 demo/on.html
  5. +0 −16 demo/style.css
  6. +52 −261 src/viewporter.js
View
@@ -1,28 +1,43 @@
-Zynga Viewporter
+Zynga Viewporter v2.0
================
Viewporter is a open-source JavaScript project by Zynga to ease mobile viewport management. It specifically simplifies the part of setting up the right screen dimensions and removes the pain from handling the *viewport* meta tag manually.
What does it do?
----------------
-When put into the header of a page and when running a mobile device, Viewporter will initialize itself automatically right away and writes the correct *viewport* meta tag to the page. Additionally, it rewrites the tag as soon as it registers an orientationchange event (when the device is rotated). It will first try to scroll away any URL or debug bars to maximize the visible window, and then substracts the remaining chrome/UI height from the window, effectively removing ugly scrollbars along the way. It also by default always triggers the native resolution, mapping device pixels to CSS pixels, for a maximum performance boost.
+When put into the header of a page and when running a mobile device, Viewporter will first try to scroll away any URL or debug bars to maximize the visible window, and then substracts the remaining chrome/UI height from the window, effectively removing ugly scrollbars along the way. It will also track orientationchange, thus, you will always have a maximized viewing experience.
+
+How to use?
+-----------
+
+In v1, all you had to to was to put Viewporter into the head of the page. There's just a little bit more to do in v2, but it isn't painful:
+
+# Add the following meta viewport to the <head> of your page:
+ <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" />
+# Wrap your <body> element with the viewporter wrapper div:
+ <body>
+ <div id="viewporter">
+ ...
+ </div>
+ </body>
+
+That's it, really! Feel free to have a look at the demo pages if something doesn't work as expected.
What's wrong with doing it manually?
------------------------------------
You could of course try to set the viewport meta tag yourselves, as suggested in [various](https://developer.mozilla.org/en/mobile/viewport_meta_tag) [places](http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/), usually something like *&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;*. You will quickly recognize two apparent issues:
-* device-width is lying (device-width is often *not* the actual screen width)
* proportional device-height doesn't subtract the chrome height, so the window is always larger than the viewport when set, causing scrollbars even on empty pages
* rotating the device will cause the page to zoom (as device-width isn't inverted on rotation)
+* even with a manually fixed viewport, there's a stupid gap at the bottom of the page (when using absolutely positioned elements)
Advantages of using Viewporter
--------------------
So what's in it for you? There's a couple of automatic advantages for you when the Viewporter is running. Here's a list:
-* Rendering speed boost (by triggering native resolutions)
* Maximized viewport (scrolling away unneeded UI)
* Easy layouting
@@ -34,19 +49,11 @@ Yep. Take a *&lt;div&gt;*, position it absolutely, set its width and height to "
API
---
-Viewporter has a couple of useful settings, constants, events and methods.
-
-### Settings
-
-* z.viewporter.settings.maxDensity (default: 163)
- This setting will override the native resolution for a given PPI. This allows you to design a 100px element that say, correlates to 2cm on any screen, on any device.
+Viewporter is almost zero configuration. There's only one constant to check if Viewporter is in fact running, a convienience method to detect landscape orientation and a smart ready callback function. In addition, there's a couple of events you will likely want to use.
### Constants
* z.viewporter.ACTIVE
-* z.viewporter.DEVICE_SUPPORTED
-* z.viewporter.DEVICE_DENSITY
-* z.viewporter.META_VIEWPORT_CONTENT
### Methods
@@ -58,5 +65,4 @@ Viewporter has a couple of useful settings, constants, events and methods.
All events fire as native events on the window object.
* viewportready - fires as soon as the Viewporter has been executed for the first time
-* viewportchange - fires when the viewport changes, i.e. the device is rotated, and after Viewporter has been executed again
-* viewportunknown - fires when no explicit profile for this device is available (viewporter might still be able to run)
+* viewportchange - fires when the viewport changes, i.e. the device is rotated, and after Viewporter has been executed again
View
@@ -7,6 +7,9 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+ <!-- This exact meta viewport is required for Viewporter for work properly -->
+ <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
@@ -15,21 +18,17 @@
<script type="text/javascript">
- viewporter.settings.maxDensity = false;
-
var log = function() {
- $("body").append("<p>"+Array.prototype.slice.call(arguments).join(' ')+"</p>");
+ $("#viewporter").append("<p>"+Array.prototype.slice.call(arguments).join(' ')+"</p>");
};
var debug = function() {
log('landscape:', viewporter.isLandscape(), '('+window.orientation+')');
- log('ppi:', viewporter.DEVICE_DENSITY);
$('#viewporter-debug-width').text(window.innerWidth);
$('#viewporter-debug-height').text(window.innerHeight);
$('#viewporter-debug-useragent').text(navigator.userAgent);
- $('#viewporter-debug-metaviewport').text(viewporter.META_VIEWPORT_CONTENT);
};
@@ -46,19 +45,18 @@
</head>
<body>
+<div id="viewporter">
<div id="orientationlock">Please rotate your device to use this demo application.</div>
-
- <div id="meter"><span>if DPI normalization is on, check if this element has the same size on every device.</span></div>
-
+
<div id="checker-bl">
<p><strong>window width:</strong> <span id="viewporter-debug-width"></span></p>
<p><strong>window height:</strong> <span id="viewporter-debug-height"></span></p>
</div>
<div id="checker-tr">
<p><strong>user agent:</strong> <span id="viewporter-debug-useragent"></span></p>
- <p><strong>meta viewport:</strong> <span id="viewporter-debug-metaviewport"></span></p>
</div>
+</div>
</body>
</html>
View
@@ -7,8 +7,10 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-
+
+ <!-- This exact meta viewport is required for Viewporter for work properly -->
+ <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" />
+
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
@@ -25,7 +27,6 @@
$('#viewporter-debug-width').text(window.innerWidth);
$('#viewporter-debug-height').text(window.innerHeight);
$('#viewporter-debug-useragent').text(navigator.userAgent);
- $('#viewporter-debug-metaviewport').text("width=device-width, initial-scale=1, maximum-scale=1");
};
@@ -38,15 +39,12 @@
</head>
<body>
- <div id="meter"><span>if DPI normalization is on, check if this element has the same size on every device.</span></div>
-
<div id="checker-bl">
<p><strong>window width:</strong> <span id="viewporter-debug-width"></span></p>
<p><strong>window height:</strong> <span id="viewporter-debug-height"></span></p>
</div>
<div id="checker-tr">
<p><strong>user agent:</strong> <span id="viewporter-debug-useragent"></span></p>
- <p><strong>meta viewport:</strong> <span id="viewporter-debug-metaviewport"></span></p>
</div>
</body>
View
@@ -7,6 +7,9 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+ <!-- This exact meta viewport is required for Viewporter for work properly -->
+ <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
@@ -15,21 +18,17 @@
<script type="text/javascript">
- viewporter.settings.maxDensity = false;
-
var log = function() {
- $("body").append("<p>"+Array.prototype.slice.call(arguments).join(' ')+"</p>");
+ $("#viewporter").append("<p>"+Array.prototype.slice.call(arguments).join(' ')+"</p>");
};
var debug = function() {
log('landscape:', viewporter.isLandscape(), '('+window.orientation+')');
- log('ppi:', viewporter.DEVICE_DENSITY);
$('#viewporter-debug-width').text(window.innerWidth);
$('#viewporter-debug-height').text(window.innerHeight);
$('#viewporter-debug-useragent').text(navigator.userAgent);
- $('#viewporter-debug-metaviewport').text(viewporter.META_VIEWPORT_CONTENT);
};
@@ -41,17 +40,16 @@
</head>
<body>
+<div id="viewporter"><!-- This wrapper element is also required -->
- <div id="meter"><span>if DPI normalization is on, check if this element has the same size on every device.</span></div>
-
<div id="checker-bl">
<p><strong>window width:</strong> <span id="viewporter-debug-width"></span></p>
<p><strong>window height:</strong> <span id="viewporter-debug-height"></span></p>
</div>
<div id="checker-tr">
<p><strong>user agent:</strong> <span id="viewporter-debug-useragent"></span></p>
- <p><strong>meta viewport:</strong> <span id="viewporter-debug-metaviewport"></span></p>
</div>
+</div>
</body>
</html>
View
@@ -33,22 +33,6 @@ p {
right: 0;
}
-#meter {
- height: 70px;
- width: 100px;
- background: yellow;
- position: absolute;
- bottom: 0;
- right: 0;
- z-index: 2;
- padding: 5px;
-}
-
-#meter span {
- color: black;
- font-size: 10px;
-}
-
#orientationlock {
position: absolute;
z-index: 1000;
Oops, something went wrong.

0 comments on commit 0653c5e

Please sign in to comment.