<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>
</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 <canvas> elements.
</canvas>
-<p id="debug" class="debugHide"></p>
-<p id="copyright"></p>
-
</body>
</html>
\ No newline at end of file
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;
#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 {
#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;
}
projects / lantea.git / commitdiff