iPhone CSS - tips for building iPhone websites

Steps

• This first bit of code is a PHP browser sniffing snippet, we’ll use some CSS media queries for that. What we’ll use this code for is serving the markup with an iPhone specific meta tag and to shorten the current page’s title.

  <?php
  $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
  if ($browser == true){
  $browser = 'iphone';
  }
  ?>

  Now to imply that condition if browser is iPhone

  <?php if($browser == 'iphone'){ ?>DO THIS<?php } ?>

• Saving to the application screen of the iPhone - shorting the page title.
  Changing conditional page title:
  

  <?php if($browser == 'iphone'){ ?>   <meta name="viewport"   content="width=device-width,   minimum-scale=1.0, maximum-scale=1.0" /> <?php } ?>

  

  The home screen icon
  Just upload a 57×57px icon (usually a larger version of your favicon) to your server root. Name the icon as apple-touch-icon.png, and the iPhone will sort the rest out.
  
  
• Stopping user pinch-zooming
  

  The second use for the PHP snippet is to serve the iPhone a meta tag which disables the user pinch-zoom that Mobile Safari offers:

  <?php if($browser == 'iphone'){ ?>
  <meta name="viewport"
  content="width=device-width,
  minimum-scale=1.0, maximum-scale=1.0" />
  <?php } ?>

• Styling
  The first thing you need to do is make sure the HTML link element that points to your main stylesheet does not have a media attribute:

• <link rel="stylesheet" type="text/css" href="/path/to/style.css" />

  We can just add our iPhone styles directly onto the end of the main stylesheet, and inherit all the styles set for desktop viewing.

• /*--- Main CSS here ---*/
  /*------------------------------------*\
  IPHONE
  \*------------------------------------*/
  @media screen and (max-device-width: 480px)
  { /*--- iPhone only CSS here ---*/ } 

• The navigation
  If you have a navigation menu in which all the items are floated and made horizontal, insert the following:
  

• @media screen and (max-device-width: 480px)
  { body{...} div{...} #nav,#nav li{   float:none!important;
  clear:both!important;   margin:0 0 20px 0!important;
  display:block;   padding:0;   text-align:left!important;
  width:100%; } #nav{   border:1px solid #ccc;
  padding:5px;   -webkit-border-radius:5px; }
  #nav li{   margin:0!important; } #nav li a{   display:block; } } 

  This then will give you a vertical navigation menu which has a 100% width and the actual links themselves have a larger hit area (applied viadisplay:block;), meaning that it’s prominent at the top of each page and easier for users to select single items.

  Images

  As images inherently have a set pixel width (i.e. their own width) there is a high chance that they will break out of the wrapper area (as a lot of images will be above 480px wide). To combat this simply add the following:

  @media screen and (max-device-width: 480px)
  { body{...} div{...} #nav,#nav li{...}
  img{   max-width:100%;   height:auto; } }