［reference 1］http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
这是一个很简单的教程，我先把里面的代码简单分析一下，在原始的网页上没有效果图，我把在我的iPod上的截图弄下来，这样既可以看到劳动的过程又可以看到劳动的成果。
这个教程里面一共有四个文件，如下所示
- The HTML: index.html
- The CSS: iphone.css
- The Javascript: orientation.js
- The tutorial: tutorial.html
- Everything zipped up: source.zip
如果您急于想看效果可以下载source.zip，配置一个WEB服务器，首页是index.html。然后用各种smart phone或iPod里的浏览器访问您刚才创建的web服务器就可以使用了（这里假设您是完全可以自己配置一个web服务器的）。我试着在ipad访问了一下这个页面，发现这个页面不能检测ipad。效果如图1，图2所示。
图1 The screen shot when I hold the ipod to the right
图2 The Screen Shot when I hold the phone upright
下面来分析一下这个代码：(index.html)
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>How to build an iPhone website</title>
6 <meta name="author" content="will" />
7 <meta name="copyright" content="copyright 2008 www.engageinteractive.co.uk" />
8 <meta name="description" content="Welcome to engege interactive on the iPhone!" />
9 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
10 <link rel="apple-touch-icon" href="images/template/engage.png"/>
11 <style type="text/css">
12 @import url("iphone.css");
13 </style>
14 <script type="text/javascript" src="orientation.j s"></script>
15 <script type="text/javascript">
16 window.addEventListener("load", function() { setTimeout(loaded, 100) }, false);
17 function loaded() {
18 document.getElementById("page_wrapper").style.visibility = "visible";
19 window.scrollTo(0, 1); // pan to the bottom, hides the location bar
20 }
21 </script>
22 </head>
23 <body onorientationchange="updateOrientation();">
24 <div id="page_wrapper">
25 <h1>Engage Interactive</h1>
26 <div id="content_left">
27 <p>You are now holding your phone to the left</p>
28 </div>
29 <div id="content_right">
30 <p>You are now holding your phone to the right</p>
31 </div>
32 <div id="content_normal">
33 <p>You are now holding your phone upright</p>
34 </div>
35 <div id="content_flipped">
36 <p>This doesn't work yet, but there is a chance apple will enable it at some point, so I've put it in anyway. You would be holding your phone upside down if it did work.</p>
37 </div>
38 </div>
39 </body>
40 </html>
1) 看第9，10，23行，
9 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
10 <link rel="apple-touch-icon" href="images/template/engage.png"/>
第9行告诉浏览器“viewport”得和iphone一样尺寸。这一行强制content总是与iphone窗口尺寸一致,余下的则是指屏幕没有放大和缩小的余地了。这里可以获得更多的viewport的资料。
第10行是创建一个webclip的图标，这个图片得是57*57，png格式的。不需要处理边界和shine。iphone会自动处理。
23 <body onorientationchange="updateOrientation();">
第23行是自动检测iPhone的方向。Safari在每次你移动iPhone里会调用javascript函数检测方向。
看网页的主体部分：23行-49行
wrapper div包含所有的要显示的内容。然后就是一个logo这个是可选内容。总是会显示的，不论手机在什么方向下。接下来是所有的内容，尽管目前iphone只支持左右和上而不支持下，但也有可能最终它会支持下，所以我们在这里把向下也定义了。
这些div会设置成display:none和display:block。把它们分开的好处是我们只需要考虑背景色，图片和尺寸了。其它的一些事情，就由各个不同的div来完成。
下面再来看CSS（iphone.css）
2 margin:0;
3 padding:0;
4 -webkit-text-size-adjust:none; /* This stops the iPhone from automatically changing the size of the text when you flip the phone */
5 }
CSS对在不同内容之间转换很关键。用类和ID可以保证只显示正确的内容。当然，首先我们得保证不主iphone的默认属性干扰。
4 -webkit-text-size-adjust:none; 这一行阻止浏览器在屏幕被转动的时候改变文本尺寸。
CSS主要做的工作是在页面载入的时候先阻止所有内容，然后指定宽度。然后显示正确的内容。
最后看一下Javascript的脚本：
2 updateOrientation();
3 }
4 function updateOrientation(){
5 var contentType = "show_";
6 switch(window.orientation){
7 case 0:
8 contentType += "normal";
9 break;
10 case -90:
11 contentType += "right";
12 break;
13 case 90:
14 contentType += "left";
15 break;
16 case 180:
17 contentType += "flipped";
18 break;
19 }
20 document.getElementById("page_wrapper").setAttribute("class", contentType);
21 }
第1行初始化方向的变化。这样每次页面载入自动检测方向。否则方向不会在载入的时候被检测。
第4行开始的函数控制页面上显示什么内容。
