Author Options:

How do I use the "@media" CSS tag to get my websites to display without zooming on a smartphone screen? Answered

I want to modify some existing websites of mine to allow for unzoomed viewing on mobile devices (my test-bed for this is my Samsung Galaxy Fit), and I believe that the "@media handheld" CSS tag is the way to go. The problem is, however, that I'm not entirely clear on how to use this tag, in an internal style sheet, to make the page fit on the mobile screen - can anyone clarify the usage of the tag for me?


Well, handheld media type was invented long ago and already for some time mobile browser developers have decided that their browsers can handle full web experience. That means no smartphone identifies itself as handheld media.

Contemporary method to target certain styles to phones is to use CSS3 media queries as part of media type. Check out http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ . Note that there are max-device-width and max-width (and same with min). The latter counts browser window viewport size - you can use it for convenient testing on desktop browser.

Also HTML meta tag for controlling initial zoom and if it will be user scalable might come handy https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag . But this one is risky, because you can't be sure all users have sufficient font size.

Generally styling an existing webpage for phones is tedious job of testing and fixing. Be prepared to do lots of googling on the problems you run into. But these two things - media queries and meta viewport tag should get you started. I haven't yet seen very good comprehensive tutorials out there. If you see any that claims it works everywhere - in my experience these are false claims.

Okay, so "@media screen", not "@media handheld" - I think I see that now. After that, I get lost...

I have a site with content that's a maximum of about 315 pixels (CSS) across, but when I view the site via the phone's browser, I get the page zoomed out to show all that appears in the computer browser, zoomed out to illegibile size. I just want to get the mobile to show the content, not a teeny version including an extra 800 pixels of empty space.

Make sure each element (div, heading, body etc)  has width that does not exceed 315 pixels or that the width is not declared (equals width: auto;) or is declared relative (like width: 100% means percentage of parent width). If the page has a wider version on desktop browsers you must overwrite all the declared widths in your mobile stylesheet. Try width: auto for all things and if that does not work then you can give 315px to body and the outermost div and auto for all the rest. Also if you have min-width declared for anything overwrite that to min-width: 1px; . After you succeed removing the unneeded width you may also need to revise paddings, borders and margins. Use Firebug to check real widths of elements, it easy to forget about something you have declared.

If despite all previous your phone thinks it must show 800px wide page then see what  <meta name="viewport" content="initial-scale = 1, user-scalable = yes"> does.