Wednesday, 20 April 2011

Quick 'n dirty Mobile site

Summarised from the Smashing Magazine article. Because sometimes you just want the bare bones, not the explanation.




  1. Add in a mobile stylesheet:




    <
    link
    rel
    =
    "stylesheet"
    type
    =
    "text/css"
    media
    =
    "only screen and (max-device-width: 480px)"
    href
    =
    "small-device.css"

    />



    If you want to use ProtoFluid (an excellent testing tool), use this one:


    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="css/small-device.css">



  2. Add in the meta tag to help the iPhone out:




    <
    meta
    name
    =
    "viewport"
    content
    =
    "width=device-width"
    />




  3. Redo styles!