projects / lantea.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 31f0fe1)
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 patch | blob | blame | history
js/map.js patch | blob | blame | history
style/lantea.css patch | blob | blame | history

diff --git a/index.html b/index.html
index 092ab1f20af2b5e6407f442c08871b471fc7b6a6..9ba8e18168b91cd3c9cb40ebeae6fb9d9ebf5a01 100644 (file)
--- a/index.html
+++ b/index.html
@@ -6,6 +6,9 @@
 <html manifest="manifest.appcache">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <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>
   <title>Lantea Maps</title>
   <script src="js/map.js"></script>
   <script src="js/ui.js"></script>
@@ -47,12 +50,12 @@ Map style:
 </fieldset>
 </div>
 
 </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>
 
 <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
 </body>
 </html>
\ No newline at end of file
diff --git a/js/map.js b/js/map.js
index 4185e0cba0a7abfedfd2ffbeb870a776b596de42..69993243a3a6568a673bb7412fef3b92b9313db0 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 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;
   gCanvas.style.position = "fixed";
   gCanvas.width = canvasWidth;
   gCanvas.height = canvasHeight;
diff --git a/style/lantea.css b/style/lantea.css
index 49133028ab83536f5f0b9fa727357cb3e264b638..b6b596d23167e56616c260194bfe8013a0e70a73 100644 (file)
--- a/style/lantea.css
+++ b/style/lantea.css
@@ -43,17 +43,22 @@ h1 {
 
 #map {
   border: 0;
 
 #map {
   border: 0;
-  top: 1em;
-  left: 1%;
-  right: 1%;
+  top: 1px;
+  left: 1px;
+  right: 1px;
+  bottom: 1px;
   z-index: 1;
 }
 
 #debug {
   position: absolute;
   z-index: 1;
 }
 
 #debug {
   position: absolute;
-  bottom: .5em;
+  bottom: 5px;
   left: .5em;
   margin: 0;
   left: .5em;
   margin: 0;
+  z-index: 3;
+  background-color: rgba(255, 255, 255, .8);
+  border-radius: 3px;
+  padding: 0 3px;
 }
 
 .debugHide {
 }
 
 .debugHide {
@@ -62,9 +67,13 @@ h1 {
 
 #copyright {
   position: absolute;
 
 #copyright {
   position: absolute;
-  bottom: .5em;
+  bottom: 5px;
   right: .5em;
   margin: 0;
   font-size: small;
   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;
 }
 }
Lantea Maps web app - display maps and record (GPS) tracks