学步园

开发时要注意的几点就是：
1、指定页面的宽度及缩放，head里加上：

<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

2、可以用window.scrollTo(0, 0);移到适合的位置。
3、没有hover，a的点击范围尽量大一点，不然很难点。两个a不要放得太近。^^或者直接在元素的onclick加跳转。
4、label居然不能关联input.
5、css支持并没有像乔布斯说的跟电脑上的Safari一样，不能直接用Safari代替调试。
6、iPhone的头跟Google的Android的基本一样：

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; zh-cn) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3

iPhone版网站还可以跑在Google的Android，也许以后可以代替WAP。

看一下别人是怎样做的：
Google: http://yidong.google.com/m yidong？移动？ 真奇怪，在国内直接访问并没有看到新版，但域名却。。，挖哈哈。
Facebook: http://iphone.facebook.com/ 很明显，由于面向的人群不一样，设计也就不一样。。
Leaflets：http://app.getleaflets.com/ 一个搜索Search，Feeds，Flickr中转，del.icio.us中转及iphone版的网站列表的综合服务，^^
Pocket Tweets：http://pockettweets.com/，Twitter的iphone版。挖哈哈，设计做得精美无比，功能呢，好像跟Twitter的差不多，除了设置
Solomodels ：http://www.solomodels.com/iphone/ 其实，我是上去看MM滴，很明显，摄影师是男滴，模特是女滴~同门还有Shockfolio http://www.shockfolio.com/iphone/，两个站风格一样，不过MM不一样。^^
beejive：http://iphone.beejive.com/ 可以上MSN，GoogleTalk，细节做得不错，看截图不知道有没有人去做可以上QQ滴。
插播广告(MT)Media Temple：http://ac.mediatemple.net/iphone 没帐号的可以到这里看一下界面截图，我的空间商，不过给的iphone版后台少了最重要的的地方－－看GPU。 (MT)很好~很强大~当机补了两个月的月租给我^^ 现在就天天盼着当机。
6间房：http://iphone.6.cn/ 应该是国内第一个iphone版的应用。^^ 可以看视频哦。 而且这里还推荐了一些iPhone版的网站
ZCOM电子杂志：http://zcom.com/iphone/ 很明显，风格就是抄6间房滴，不过做的还不错。这里有ZCOM的iPhone的专页制作过程，好像少了重点。挖哈哈。

其实iPhone版的网站已经有一大堆了。可以到iPhone™ Application List有没有适合你的应用，不过好像多数设计得不怎样。

 

 

针对Mobile(iPhone)的Web前端优化，目前只有两条规则。

1. 单个数据对象小于 25K (Keep Components under 25K)

这个似乎只是针对 iPhone 研究的。建议保持单个 Web 数据对象在 25 K 以下。为什么是 25K? Apple 官方信息指出可缓存到内存中的 Web 对象最大支持到 10M，但经过测试，发现也就是 25K 左右。

iPhone 在市场上的优异表现，让 Web 人员不得不考虑如何针对其进行优化。相信这部分内容也在不断变化中。

2. Pack Components into a Multipart Document

把Web 页面组件打包成一个多部分组成的文档。其目的是减少 HTTP 请求。

 

 

 

以下的东西不是什么新东西，只是这两天在给基金会网站做 iPhone 版的时候，用到一些小东西，虽然不是什么难东西，但是却是很有用的东西，这里记录一下。

1.指定页面的宽度和其它参数，在meta定义可以使得页面宽度让iPhone知道限定屏幕宽度代码如下:

<meta name=”viewport” content=”width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”/>

看字面理解就是：宽度320，默认比例1.0，最大放大比例1.0，用户不能放大，如果想实现缩放效果，可以细节调整比例，设置缩放比例即可。

把以上元素应用在页面就可以啦~~网页编码gbk和utf-8无所谓

2.设置页面加载完成的位置，safari浏览器上面有个搜索框，进入网站后就显示在那很不友好，你可以加上下面的代码，向下移动一下网页就好了，体验很好

实现的脚本

1. <script type=“”application/x-javascript”“><!–
2. addEventListener(”load”, function()
3. {
4. setTimeout(hideAddressbar, 100);
5. }, false);
7. function hideAddressbar()
8. {
9. window.scrollTo(0, 1);
10. //xy位置，根据页面进行调整
11. }
12. // –></script>

3.让用户访问www页面自动跳转到iPhone页面，php方式：$_SERVER[HTTP_USER_AGENT]的值是：
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; zh-cn) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3
确认一下有没有iPhone字样也许就可以了

1. if(strstr($_SERVER[HTTP_USER_AGENT],“iPhone“)){
2. header(“location:/iphone/“);
3. die();
4. }

js方式：

1. <script type=“text/javascript“><!–
2. var CFMOBI_TOUCH = ["iPhone","iPod","Android","BlackBerry9530","LG-TU915 Obigo","LGE VX"];
3. for (var i = 0; i < CFMOBI_TOUCH.length; i++) {
4. if (navigator.userAgent.indexOf(CFMOBI_TOUCH[i]) != -1) {
6. //do something…..
8. break;
9. }
10. }
11. // –></script>