［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行开始的函数控制页面上显示什么内容。
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
