From 6b1e7340ac284a677b516020d90832083f43ad1b Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Fri, 2 Mar 2012 14:22:31 +0100 Subject: [PATCH] try to deal with the default scaling of mobile devices, eliminate white borders around the map --- index.html | 9 ++++++--- js/map.js | 4 ++-- style/lantea.css | 21 +++++++++++++++------ 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 092ab1f..9ba8e18 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,9 @@ + + Lantea Maps @@ -47,12 +50,12 @@ Map style: +

+ + Please use a browser that supports <canvas> elements. -

- - \ No newline at end of file diff --git a/js/map.js b/js/map.js index 4185e0c..6999324 100644 --- 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; diff --git a/style/lantea.css b/style/lantea.css index 4913302..b6b596d 100644 --- a/style/lantea.css +++ b/style/lantea.css @@ -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; } -- 2.35.3