Optimizing websites for iPhone and Android

Check out the new site at https://rkblog.dev.

There is a lot of small bits and peaces on the net about optimizing/designing web pages for mobile devices like iPhone or Android. Reading some articles and making some tests on iPhone and Android emulators - you can quite easily "optimize" web page for those platforms using CSS. There is something like media type for attaching CSS files for various reasons like for printing. handheld is used to attach CSS file for mobile devices, but it isn't used by Android and iPhone. They use the default (screen) media type.

To use two CSS files of "screen" media type, one for iPhone and Android, and second one for desktop use something like this (google code search is the key!):

<link rel="stylesheet" href="style_print.css" media="print" type="text/css" />
<link rel="stylesheet" href="style.css" media="screen and (min-device-width: 481px)" type="text/css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="style_mobile.css" />
<!-- new androids -->
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio:0.75)" href="style_mobile.css" />
<link rel="stylesheet" href="style_mobile.css" media="handheld" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
<![endif]-->
<!-- tell iPhone not to shrink mobile website -->
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
The only screen and (max-device-width: 480px) apply to mobile screens. screen and (min-device-width: 481px) is used to prevent desktop CSS from being loaded by the mobile browser. As usual there are some IE issues which can load both CSS (so we use if !IE) or not support min-device-width, so another hack is required:
<!--[if IE]><link rel="stylesheet" type="text/css" href="style.css"  media="screen" /><![endif]-->
For some reason newer versions of Android (starting from 2.3 or 2.2) won't use max-device-width. Instead they have -webkit-device-pixel-ratio feature.
You can also place CSS with media types inline in the HTML file like this:
<style>
@media handheld {
   body {
     background-color:tan;
   }
 }
 @media only screen and (max-device-width: 480px) {
   body {
      background-color:yellow;
   }
 }
</style>

Here is an example of such CSS combo in action. Let say we have a site with two DIV columns. Without any extras for mobile devices it would look like this:

mobile6b
But if we add CSS for iPhone/Android and change that columns doesn't float but are one after another etc. then it will look much better out of the box:
mobile6
mobile8

To play with Android emulator you need Android SDK, free from Google. It works on MS Windows, OS X, and Linux (32-bit, and some 64-bit distros with 32-libs). You can use the eclipse integration to configure the emulator (different displays and orientation), or use for example Titanium Developer. To use iPhone emulator you need iPhone SDK from Apple (free download after registration), and it works only on OS X :) Palm Pre also has SDK and emulator but I didn't played with it yet...

RkBlog

Web development, 4 July 2009


Check out the new site at https://rkblog.dev.
Comment article
Comment article RkBlog main page Search RSS Contact