Permalink
Browse files

page min-height fix as per additional research for #9 Investigate/fix…

… incorrect zooming issue
  • Loading branch information...
1 parent e718243 commit cf716a66774b9210f49fcb94a4562f748377def8 @sgrebnov committed May 7, 2012
Showing with 66 additions and 0 deletions.
  1. +36 −0 tests/extra/fit.html
  2. +30 −0 themes/metro/jquery.mobile.metro.theme.init.js
View
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+ <title>Content fit test</title>
+
+ <link rel="stylesheet" href="../../themes/metro/jquery.mobile.metro.theme.css" />
+ <script src="../../jqmobile-core/jquery.js"></script>
+ <script src="../../themes/metro/jquery.mobile.metro.theme.init.js"></script>
+ <script src="../../jqmobile-core/jquery.mobile.js"></script>
+
+
+
+ <style type="text/css">
+
+
+
+ </style>
+
+</head>
+
+<body id="id1" style="background-color: red;">
+ <div id="id2" data-role="page" data-theme="a">
+ <div data-role="header" data-theme="a">
+ <span class="ui-app-title">Content fit test</span>
+ <h1>the header</h1>
+ </div>
+
+ <div data-role="content" data-theme="a">
+ This page should fit the entire web browser area.
+ </div>
+
+ </div>
+</body>
+</html>
@@ -12,7 +12,37 @@
limitations under the License.
*/
+// special fix to have body content fit the entire browser area
+function bodyMinHeightFix() {
+ var isWp7 = window.navigator.userAgent.indexOf("IEMobile/9.0") != -1;
+
+ if (!isWp7) return;
+
+ // portrait mode only
+ if(window.innerHeight <= window.innerWidth) return;
+
+ var zoomFactorW = document.body.clientWidth / screen.availWidth;
+
+ // default value (web browser app)
+ var addrBarH = 72;
+
+ // no app bar in web view control
+ if (typeof window.external.Notify !== "undefined") {
+ addrBarH = 0;
+ }
+
+ var divHeightInDoc = (screen.availHeight-addrBarH) * zoomFactorW;
+ //$("body")[0].style.minHeight = divHeightInDoc + 'px';
+
+ var page = $("div[data-role='page']");
+ if (page.length > 0)
+ page[0].style.setProperty("min-height", divHeightInDoc + "px", 'important');
+
+}
+
$(document).ready(function(){
$.mobile.defaultDialogTransition = 'none';
$.mobile.defaultPageTransition = 'none';
+
+ bodyMinHeightFix();
});

0 comments on commit cf716a6

Please sign in to comment.