Mobile Styles for iPhone and Android

  • The viewport meta tag is used for both styles in the xhtml files. The most important settings here are width=device-width, initial scale=1.0. There are some other settings added. For the iPhone, we are preventing scaling:
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
  • For Android, we are preventing scaling and also using a proprietary value called targetdensitydpi, to fix an Android auto-zoom issue:
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi' />
  • Standard options for the content attribute of the viewport meta tag include: width (device-width or pixel value), height device-height or pixel value), initial-scale(0 to 10.0), minimum-scale (0 to 10.0), maximum-scale (0 to 10.0), and user-scalable (yes/no). We encourage clients customizing their mobile styles to allow user scaling, should they so desire. To do this, remove maximum-scale=1.0 and replace with user-scalable=yes. You can also set maximum-scale to a higher value, such as 1.5 or 2.0.
  • The base font size is set to 14px in the body CSS selector; various headings are adjusted via font-size using em units.
  • There is a fix in iPhone style (landscape media queries) for an issue that causes content zooming on switch
  • The Android tablet platform needed to be addressed in the Android style, as it will have 'Android' in user agent string; these media queries prevent serving the narrower mobile styles to a tablet. The media query for this is:
    @media only screen and(min-width:801px) { /* styles here */ }


Related Posts

CSS3 Media Queries