Question

My project is located at the following URL:

http://mmhudson.com/test.html

The div and the canvas contained on the document are set to be 480 pixels wide on most devices, but on mobile devices (my iPhone and android phone are the only devices I’ve tested, but I’m assuming it’s pretty much universal) they are 480 pixels on the document, but the document is wider than the number of pixels on the screen (you’ll understand what I mean when you look on a mobile device if you don’t already understand). The weird thing is it works perfectly fine on a computer.

How can I fix this?

Answer 1

Use a valid DOCTYPE and then

<meta name="viewport" content="width=device-width, initial-scale=1">

The important part is width=device-width.

https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag