try to deal with the default scaling of mobile devices, eliminate white borders aroun...
authorRobert Kaiser <kairo@kairo.at>
Fri, 2 Mar 2012 13:22:31 +0000 (14:22 +0100)
committerRobert Kaiser <kairo@kairo.at>
Fri, 2 Mar 2012 13:22:31 +0000 (14:22 +0100)
index.html
js/map.js
style/lantea.css

index 092ab1f..9ba8e18 100644 (file)
@@ -6,6 +6,9 @@
 <html manifest="manifest.appcache">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <!-- try to counts default scaling on mobile, see 
+       https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=.6667, maximum-scale=.6667">
   <title>Lantea Maps</title>
   <script src="js/map.js"></script>
   <script src="js/ui.js"></script>
@@ -47,12 +50,12 @@ Map style:
 </fieldset>
 </div>
 
+<p id="debug" class="debugHide"></p>
+<p id="copyright"></p>
+
 <canvas id="map" width="500" height="500">
   Please use a browser that supports &lt;canvas&gt; elements.
 </canvas>
 
-<p id="debug" class="debugHide"></p>
-<p id="copyright"></p>
-
 </body>
 </html>
\ No newline at end of file
index 4185e0c..6999324 100644 (file)
--- a/js/map.js
+++ b/js/map.js
@@ -134,8 +134,8 @@ function resizeAndDraw() {
   var viewportWidth = Math.min(window.innerWidth, window.outerWidth);
   var viewportHeight = Math.min(window.innerHeight, window.outerHeight);
 
-  var canvasWidth = viewportWidth * 0.98;
-  var canvasHeight = (viewportHeight - 100) * 0.98;
+  var canvasWidth = viewportWidth - 2;
+  var canvasHeight = viewportHeight - 2;
   gCanvas.style.position = "fixed";
   gCanvas.width = canvasWidth;
   gCanvas.height = canvasHeight;
index 4913302..b6b596d 100644 (file)
@@ -43,17 +43,22 @@ h1 {
 
 #map {
   border: 0;
-  top: 1em;
-  left: 1%;
-  right: 1%;
+  top: 1px;
+  left: 1px;
+  right: 1px;
+  bottom: 1px;
   z-index: 1;
 }
 
 #debug {
   position: absolute;
-  bottom: .5em;
+  bottom: 5px;
   left: .5em;
   margin: 0;
+  z-index: 3;
+  background-color: rgba(255, 255, 255, .8);
+  border-radius: 3px;
+  padding: 0 3px;
 }
 
 .debugHide {
@@ -62,9 +67,13 @@ h1 {
 
 #copyright {
   position: absolute;
-  bottom: .5em;
+  bottom: 5px;
   right: .5em;
   margin: 0;
   font-size: small;
-  opacity: .5;
+  opacity: .66;
+  z-index: 2;
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 3px;
+  padding: 0 3px;
 }