iPhone Optimization

gistfile1.htm

<!-- Screencast "Designing Web Content for iPhone @ 20:59 - "Viewport Examples"
<!-- Default viewport width = 980px -->
<!-- https://developer.apple.com/webapps/docs/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/chapter_4_section_5.html -->

<meta name="viewport" content="width=device-width, user-scalable=no">
<!-- or -->
<meta name="viewport" content="maximum-scale=1.0,width=device-width,initial-scale=1.0">

gistfile2.htm

<!-- Screencast "Designing Web Content for iPhone" @ 16:02 - "Media Queries" -->
<!-- http://developer.apple.com/webapps/docs/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/chapter_3_section_2.html -->

<!-- For iPhone: -->
<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">

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

gistfile3.css

/* Screencast "Designing Web Content for iPhone @ 27:20 - "Overriding Text Size Adjustment" */
/* http://media.readernaut.com/stylesheets/mobile.css */

html { -webkit-text-size-adjust: none; }

gistfile4.htm

<!-- 57 x 57 pixels -->

<link rel="apple-touch-icon" href="/images/touch_icon.png">