How to scale a website for mobile devices?

android css iphone mobile-website
koby picture koby · Mar 2, 2010 · Viewed 20.5k times · Source

I've a very simple static web page (only css and links, no scripts). It looks good on android and iphone, but too small. I'm guessing they put it smaller since it work for most of the sites. How can I override this and make him look the size I want it to be?

Answer

TomHastjarjanto picture TomHastjarjanto · Mar 2, 2010

Android automatically adjusts to the size of your site, try to use width:100% or smaller than around 310 pixels (scrollbar takes space) for normal viewmode.

For IPhone try using this code to force the correct size

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Also to force font-size try to use this code in your css:

-webkit-text-size-adjust: none;

Related questions

Disable scrolling in all mobile devices

This sounds like there should be a solution for it all over the internet, but I am not sure why I cannot find it. I want to disable Horizontal scrolling on mobile devices. Basically trying to achieve this: body{ overflow-x:…

Read More
Do iPhone / Android browsers support CSS @media handheld?

I want to change my web page CSS for web browsers running on cell phones, like the iPhone and Android. I've tried something like this in the CSS file: @media handheld { body { color: red; } } But it doesn't seem to have …

Read More
@font-face not working in mobile Webkit

I'm having trouble getting @font-face to behave in any mobile Webkit browser I've tested--Safari on an iPhone 3GS, the default Android 2.2 browser, and Dolphin browser on Android. It works in all desktop browsers, from IE7 to IE9, FF3.5, Safari 4, and …

Read More