How to make an HTML webpage the correct size on a mobile device

I have written about this a few times (just last week) and I wanted to add some details to the discussion. Basically when designing a webpage for the mobile device you want your page to show up as the correct size on the device so the user does not need to zoom. To do it you would use the viewport code. Today I am adding some more details to that:

General width. Keep in mind the ‘780’ changes depending on the size of your actual page:

<meta name="viewport" content="width=780">

This code just matches their device regardless of what you set:

<meta name="viewport" content="width=device-width">

The following disables zooming altogether:

<meta name="viewport" content="width=device-width, user-scalable=no" /> 

This sets the zoom level when the page is first opened:

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

This creates no zooming and the user has to move the screen around:

<meta name="viewport" content="maximum-scale=1">

I encourage you to try them all out to see what works for your site and so that you get a better idea of what they all look like.

Posted in HTML, Mobile Learning and tagged , , .

Leave a Reply