Created
February 25, 2012 08:19
-
-
Save Checksum/1907317 to your computer and use it in GitHub Desktop.
Fit canvas to viewport size for mobile devices
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Fit canvas to viewport for mobile devices</title> | |
<style> | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
#container { | |
margin: 0 auto; | |
width: 800px; | |
overflow: hidden; | |
position: relative; | |
border: 1px solid #000; | |
border-radius: 10px; | |
margin-top: 2px; | |
} | |
canvas { | |
display: block; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<canvas id="workspace" width="800" height="600"></canvas> | |
</div> | |
<script> | |
(function() { | |
// We are resizing for mobile devices only. For other devices, the | |
// dimensions will be stuck at 800 * 600. To change the default dimensions, | |
// change the height and width of the canvas and the width of the #container | |
var win = window, | |
doc = document, | |
w = win.innerWidth, | |
h = win.innerHeight, | |
container = doc.getElementById('container'), | |
canvas = doc.getElementById('workspace'); | |
if( win.navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/i) ) { | |
canvas.height = h; | |
canvas.width = w; | |
container.style.height = h+"px"; | |
container.style.width = w+"px"; | |
} | |
})(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment