• download and unpack the SDK zip file from http://developer.android.com/sdk/index.html
• add the SDK tools directory to your path (in ~/.bashrc):
  export PATH=${PATH}:${HOME}/…/android-sdk-mac/tools
• start Terminal
• run the “Android SDK and AVD Manager”:
  android &
  • select Settings on the left
    • select Force https://… sources to be fetched using http://…
  • select Available Packages on the left
    • select the checkboxes for the various SDK Platforms
    • press Install Selected
• make an “Android Virtual Device”:
  android create avd --target 1 --name david
• run the emulator (note: it can take minutes to boot):
  emulator -avd david

Add iPhone directives to header

• the META tag informas the iPhone about how wide we want the page to look – i.e. the width of the iPhone
• the LINK tag loads our iPhone specific CSS (tip from here)
• this should be after your normal CSS LINK (or whatever) directive

<meta name="viewport" content="width=320" />
<link rel="stylesheet" type="text/css"
  media="only screen and (max-device-width: 480px)"
  href="/blog/wp-content/themes/davidjanes/iphone.css" />

Define iPhone specific CSS

• this will obviously vary depending on what your current CSS does – that still gets loaded
• most of this was pragmatically discovered
• I hide several sections which I don’t think the user wants to see on an iPhone; I’ll probably play with this more
• the PRE directive doesn’t use line breaking, so we just clip the examples, after making sure the font is small enough to get enough on a single line

body {
    padding: 5px;
    width: 480px;
}
div#content {
    float: none;
}
div#menu {
    display: none;
}
p.credit {
    display: none;
}
pre {
    overflow: hidden;
    font-size: 10px !important;
}
h1, h1 * {
    font-size: 36px;
}

What still needs to be done

• we shouldn’t serve sections that users are not going to see – it’s a waste of bandwidth
• we shouldn’t serve more than 10 articles
• I’ll have to figure out how to do mobile browser detection on WordPress