Bug 436083: Viewport meta tag [r=mark.finkle r=gavin.sharp]

mobile/chrome/content/BrowserView.js

@@ -575,8 +575,11 @@ BrowserView.prototype = {
     if (!browser)
       return 0;
 
-    if (Util.contentIsHandheld(browser))
+    let metaData = Util.contentIsHandheld(browser);
+    if (metaData.reason == "handheld" || metaData.reason == "doctype")
       return 1;
+    else if (metaData.reason == "viewport" && metaData.scale > 0)
+      return metaData.scale;
 
     let bvs = this._browserViewportState;  // browser exists, so bvs must as well
     let w = this.viewportToBrowser(bvs.viewportRect.right);

mobile/chrome/content/Util.js

@@ -112,16 +112,27 @@ let Util = {
   contentIsHandheld: function contentIsHandheld(browser) {
     let doctype = browser.contentDocument.doctype;
     if (doctype && /(WAP|WML|Mobile)/.test(doctype.publicId))
-      return true;
+      return {reason: "doctype", result: true};
 
     let windowUtils = browser.contentWindow
                              .QueryInterface(Ci.nsIInterfaceRequestor)
                              .getInterface(Ci.nsIDOMWindowUtils);
     let handheldFriendly = windowUtils.getDocumentMetadata("HandheldFriendly");
     if (handheldFriendly == "true")
-      return true;
+      return {reason: "handheld", result: true};
 
-    return false;
+    let viewportScale = parseFloat(windowUtils.getDocumentMetadata("viewport-initial-scale"));
+    if (viewportScale > 0) {
+      return {
+        reason: "viewport",
+        result: true,
+        scale: viewportScale,
+        width: parseInt(windowUtils.getDocumentMetadata("viewport-width")),
+        height: parseInt(windowUtils.getDocumentMetadata("viewport-height"))
+      }
+    }
+
+    return {reason: "", result: false};
   }
 };
 

mobile/chrome/content/browser.js

@@ -372,7 +372,7 @@ var Browser = {
     bv.beginBatchOperation();
 
     let stylesheet = document.styleSheets[0];
-    for each (let style in ['window-width', 'window-height', 'toolbar-height', 'browser', 'browser-handheld']) {
+    for each (let style in ["window-width", "window-height", "toolbar-height", "browser", "browser-handheld", "browser-viewport"]) {
       let index = stylesheet.insertRule("." + style + " {}", stylesheet.cssRules.length);
       this.styles[style] = stylesheet.cssRules[index].style;
     }
@@ -2489,8 +2489,29 @@ Tab.prototype = {
   endLoading: function() {
     // Determine at what resolution the browser is rendered based on meta tag
     let browser = this._browser;
-    if (Util.contentIsHandheld(browser)) {
+    let metaData = Util.contentIsHandheld(browser);
+
+    if (metaData.reason == "handheld" || metaData.reason == "doctype") {
       browser.className = "browser-handheld";
+    } else if (metaData.reason == "viewport") {
+      let screenW = window.innerWidth;
+      let screenH = window.innerHeight;
+      let viewportW = metaData.width; 
+      let viewportH = metaData.height;
+      let validW = viewportW > 0;
+      let validH = viewportH > 0;
+
+      if (validW && !validH) {
+        viewportH = viewportW * (screenH / screenW);
+      } else if (!validW && validH) {
+        viewportW = viewportH * (screenW / screenH);
+      } else {
+        viewportW = kDefaultBrowserWidth;
+        viewportH = kDefaultBrowserWidth * (screenH / screenW);
+      }
+      browser.className = "browser-viewport";
+      browser.style.width = viewportW + "px";
+      browser.style.height = viewportH + "px";
     } else {
       browser.className = "browser";
     }