先看看敏捷的4句宣言:
个体与交互 重于 过程和工具
可用的软件 重于 完备的文档
客户协作 重于 合同谈判
响应变化 重于 遵循计划
在每对比对中，后者并非全无价值，但我们更看重前者。
《敏捷宣言》背后的12准则
我们遵循以下准则：
我们的最高目标是，通过尽早和持续地交付有价值的软件来满足客户。
欢迎对需求提出变更——即使是在项目开发后期。要善于利用需求变更，帮助客户获得竞争优势。
要不断交付可用的软件，周期从几周到几个月不等，且越短越好。
项目过程中，业务人员与开发人员必须在一起工作。
要善于激励项目人员，给他们以所需要的环境和支持，并相信他们能够完成任务。
无论是团队内还是团队间，最有效的沟通方法是面对面的交谈。
可用的软件是衡量进度的主要指标。
敏捷过程提倡可持续的开发。项目方、开发人员和用户应该能够保持恒久稳定的进展速度。
对技术的精益求精以及对设计的不断完善将提升敏捷性。
要做到简洁，即尽最大可能减少不必要的工作。这是一门艺术。
最佳的架构、需求和设计出自于自组织的团队。
团队要定期反省如何能够做到更有效，并相应地调整团队的行为。
敏捷, 现在我所做的项目,也是实行敏捷.
那么谈谈关于敏捷的几个话题:
1. 敏捷的最终目的是什么?
根据我们的项目测试流程来看,迭代一,迭代二,迭代三四五,然后集成测试,回归测试.可以看出敏捷的目的之一是软件的高效迭代.
根据提交的BUG的修复类型来看,严重的BUG,修复的优先级最高.因为这部分干系到软件的质量,同时也用户最关注的问题.所以敏捷的目的之二是更具高质量,更能满足用户的关键需求.
2. 敏捷适用于多少人的团队?
现在我们的项目测试有20人,3个平台,KJAVA平台 3(外包) + 1(客户方)=4人; Symbian平台 4人(外包) + 1(客户方) =5人; MTK平台 3(外包) + 1(客户方)=4人. 可以看出敏捷的测试团队不超过10人.
3. 敏捷中手工测试和自动化测试比例
目前基本上是采用手工测试,自动化测试很少. 但由于需求不明确,以客户为导向的测试. 无论手工测试还是自动化测试都可以敏捷.如果是手工测试的敏捷,个人觉得团队人数不能超过10人, 模块组件小,才可以做到. 如果人数超过10人,模块组件稍微大点, 要想敏捷, 自动化测试是必须的, 而手工测试居多的话,和每个人员沟通起来很困难, 最终会成为整个团队的短板.
4. 敏捷中的文档和沟通成本
目前我们没有正式的需求文档, 而所谓的需求文档,是通过与接口人沟通,我方自行整理不成为的模块需求草稿. 这样有助于不清楚需求的同学随时可以查看需求,从而减少频繁在需求沟通上浪费时间. 如果完全没有需求文档,可以想象一下,在任务比较紧急,人员不够的情况下, 大部分的时间将会浪费在频繁的沟通上.如果沟通的成本远远大于使用文档的成本,得不偿失.
5. 实行敏捷中的会议人员
每次会议,必须把需求人员,产品经理,开发,测试,甚至产品设计师,UED开发人员,UED测试人员,客服人员等 在一起参加会议. 这样大家能及时获取最新需求信息. 降低大家的沟通成本. 个人觉得敏捷应强调与客户的沟通,即与需求的沟通, 如果需求发生变化, 应及时调整团队方向.
6. 敏捷中测试人员的业务与技术
在敏捷过程中,测试人员的业务知识要比开发更熟练, 技术上约等于开发,这样才会提高整个敏捷团队的战斗力.
阿里巴巴的产品经理能力模型(2010-01-28 14:34:27)转载 标签：互联网产品经理能力it 分类：互联网产品经理 阿里巴巴国际网站部一位产品经理归纳的： (1)行业积累 (2)执行能力 (3)智慧 (4)方法论
1. 传统获得优惠券的方法通常是被动接受优惠券传单,或在各大网站上打印优惠券,但是这要提前在PC上做好准备才行.而如果没有接受优惠券传单或在PC上做好准备,而此时在外面,突然想去某家餐厅,麦当劳,KFC等地方吃东西,怎么办呢?? 此时可以用手机登陆手机优惠券网站,让用户能随时随地的找到附近商场的优惠卷,并将优惠券以短信或彩信的方式发送给用户,这样用户就可以利用优惠券购物. 也可以不用优惠卷,在手机站点上订购.
1 为什么要有兼容性测试：比web浏览器还恐怖的手机浏览器
对于web网站，一般来说，目前我们需要兼容的是
1个操作系统（windows）X 3种浏览器（ie 6、ie7、firefox）= 3种情况
要求高一点的web网站需要兼容的是
1个操作系统（windows）X 7种浏览器（ie6、ie7、firefox、chorme、opera、safari、遨游）+ 1个操作系统（mac） X 1种浏览器（safari）= 8种情况
注：以上浏览器除了ie外，均指其最新版本。另，遨游浏览器虽然是基于ie内核，但某些表现却完全出人意料，故也加入考虑。
好了，以上最多8种需要兼容的情况，已经让人大呼头痛不已，何况事实上这些浏览器对html代码本身的解析都是没问题的，你比较需要费心的只是ie6的css和js。
那么手机浏览器有多少种需要兼容的情况呢？
从上一篇文章看来，如果要做到比较好的兼容性，我们要兼容的手机浏览器至少有二十种情况（手机自带的浏览器+用户可安装的浏览器）
web浏览器的兼容性大致可根据浏览器的渲染引擎来确定兼容类型，但手机浏览器，即使是使用的同一个渲染引擎，在不同的手机上表现也可能很不一样。
还有两个更令人头痛的问题：
- 你没法使用css hack
- 你也没法逐一去测试各浏览器的实际效果
所以，当你涉足手机网站开发的时候，你才会感概，web浏览器们真是太仁慈了。
不过事情还不算太坏，就目前来看，基于手机浏览器的限制，一般手机网站的布局和功能不会太复杂，而高级一些的手机浏览器（如iphone等）兼容性还是很理想的，不用操心。
不管怎样，对于一个专业的手机网站来说，有一份专业的浏览器兼容性测试报告是非常有必要的。面对成百上千的手机型号，还有日益强大的山寨机，我们的兼容性测试要覆盖哪些机型呢？
2 目标用户数据挖掘
我们基本不可能兼顾到所有类型的手机浏览器，所以你必须要根据你的用户数据来决定要测试兼容性的手机型号。
你的手上需要有以下数据：
- 你的网站访问的手机型号统计
- 用户访问你的网站的主要行为
如果拿不到这些数据，那么接下来的兼容性测试将会艰难很多，你不得不通过广撒网的方式，测试尽可能多的手机（而不是主要目标客户群的手机）来确认某些属性的兼容性，这可不是一个好主意，相信让你的老板掏银子给你采购几十乃至上百台手机不太现实。
总的来说，你需要得到测试手机的以下数据：
手机型号、操作系统、浏览器类型、屏幕尺寸、颜色深度
3 安排测试，整理测试结果
当我们设计测试点的时候，应该涵盖哪些内容呢？
- 对xhtml代码本身的支持度，如是否支持<input type=”image” />
- 对特殊字符的支持度，如★◆
- 对css的支持度
- 对css不同引入方式的支持
- 对css的属性的支持
- 对css某属性不同属性值的支持，如margin的取负值、background-repeat的不同取值
- 对css选择器的支持，如tag，class，id，选择器的嵌套
- 对css高级选择器的支持
- 对js的支持度
- 目前还不太可能在手机上创建很复杂的js效果，可以仅测试js的基本功能，比如对事件的支持，当然，使用js最重要的是要考虑好如何优雅降级，确保用户在没有js的情况下也能顺利完成任务
- 对图片的支持度
- 支持图片类型，包括gif非透明背景、gif透明背景、gif动画图、jpg、png8非透明背景、png8透明背景、png24非透明背景和png24透明背景
- 支持图片颜色，如色彩复杂的图片，光滑渐变的图片
设计一个专用于测试的excel表格，方便测试人员填写测试结果也是非常重要的工作，如果这一步没有做好，也许你之前所有的努力都将白费。传承有价值的研究结果，其意义不低于研究本身。
由于之前所进行的手机兼容性研究工作都属于公司商业机密，具体测试表格无法公示，有兴趣的同学可以单独交谈。
头大的是，除了自己公司已有的一些经验，网上恐怕没有过多的(公开的)文档可以参考。 09年上半年的工作重心全在手机网页开发上面，这使得自己某种程度上也成了拓荒者。现将这段时间的开发心得同大家分享以下，欢迎大家跟我交换自己的想法。
手机网站开发必修课系列文章计划：
- 手机浏览器
- 来自wiki的解释
- 对wiki的总结
- 浏览器兼容性测试
- 为什么要有兼容性测试：比web浏览器还恐怖的手机浏览器
- 目标用户数据挖掘
- 安排测试，整理测试结果
- 测试结果对手机网站开发的指导意义
- 对设计的指引作用
- 确保裸html代码具有较高可用性，谨慎使用html标签
- css使用注意事项
- 非常重要：代码的优雅降级
注：由于有些数据牵涉到公司的商业机密，所以在这个系列的文章当中，有些可能不会公布出详细的数据，但会给出方向性的结论或者意见，请大家见谅。
要了解手机网站开发的诀窍，我们必须先了解手机浏览器。虽然百度“手机浏览器”没啥有价值的文章，所幸google“mobile broswer”出来了比较多有价值的文章。那么，站在前人的肩膀上，我们可以看的更远。
以下文字翻译自维基百科》手机浏览器:http://en.wikipedia.org/wiki/Mobile_browser
手机浏览器，又称微浏览器、迷你浏览器或者无线因特网浏览器，是被设计用于像手机或者PDA之类的无线设施的网页浏览器。手机浏览器针对在便携设备上的小屏幕网页显示进行了专门的优化，以使网页内容显示最高效。手机浏览器的软件必须小巧并且能适应无线掌上设备的低存储量和低带宽。它们一度是最简朴的网页浏览器，但是2006年以后有些手机浏览器能够支持象css2.1、JavaScript和Ajax这样的最新技术。那些被设计从手机浏览器访问的网站叫无线门户。
- 相关的技术
- 先驱们
- 流行的移动浏览器
- 被主流手机和PDA厂商使用的默认浏览器
- 用户可安装的手机浏览器
- 手机HTML代码转换机
- 更多
- 参考
- 更多外部链接
1 相关的技术
手机浏览器通常通过蜂巢网络连接，通过无线局域网连接的手机浏览器数量也日渐增多，后者使用基于TCP/IP的HTTP并能显示那些使用HTML, XHTML Mobile Profile (WAP 2.0), 或者WML (从HDML发展而来)编写的网页。WML和 HDML是适于通过低带宽传送数据的最简朴的形式，而无线数据的连接被称为WAP。
在日本，DoCoMo定义了基于i-mode HTML的 i-mode服务，是压缩HTML(C-HTML)的一种扩展，HTML的一个子集。
WAP 2.0指定了XHTML手机协议和WAP CSS，WAP CSS是是W3C标准的 XHTML和 CSS在移动设备上扩展的一个子集。
2 先驱们
那些被称为微浏览器的技术，诸如WAP， NTTDocomo的 i-mode平台和Openwave的 HDML平台点燃了人们对无线数据服务的第一次热情。
第一个微型浏览器的诞生大约是在1997年， 当Unwired Planet 公司(后来发展为 Openwave)将他们的”UP.Browser”放在AT&T公司的手持设备上以供用户访问HDML内容。
一家英国公司， STNC股份有限公司，在1997年的时候研发了一款叫做 HitchHiker的微型浏览器，并对这款装备设计了全套的UI。这款微型浏览器(Webwalker)的演示平台拥有每秒处理百万条指令的能力。它是一个单核处理平台，在类似于应用堆栈的处理器上跑着GSM堆栈。1999年 STNC被微软收购，并且HitchHiker变身为Microsoft Mobile Explorer 2.0,不同于之前的Microsoft Mobile Explorer 1.0。HitchHiker被认为是第一款拥有统一标准的渲染模型的微型浏览器，它在一个客户端遵从EcmaScript, WMLScript, POP3 和 IMAP 邮件等标准处理 HTML 和 WAP。尽管这个浏览器最终未被使用，但它确实可是使HTML 和 WAP在一个页面上联合使用，虽然这将使得其他的设备无法正确渲染该页面。另外， Amstrad公司倒霉的将HitchHiker作为他们e-m@iler和 e-m@iler+产品的操作系统，手机浏览器2.0在Benefon Q, Sony CMD-Z5, CMD-J5, CMD-MZ5, CMD-J6, CMD-Z7, CMD-J7 and CMD-J70.等设备上都可使用。
还有一款叫Palmscape的用于PalmOS的免费浏览器（虽然后来才成为共享软件的），由Kazuho Oku 1998年在东京编写，他继而发现了Ilinx，这款浏览器直到2003年才放开使用限制。
于2001年发布的 Mobile Explorer 3.0增加了iMode的兼容性和众多的专利设计。通过假想的将这些专利设计结合到WAP协议中， MME3.0执行了OTA数据库同步、推送了email，推送了信息客户端和PIM功能。已经退出市场的索尼爱立信CMD-Z700深度集成了MME3.0。MME的开发脚步在2002年中旬画上了句号。
Opera Software公司以他的小屏幕渲染技术(Small Screen Rendering )和中屏幕渲染技术(Medium Screen Rendering)领先于该领域。Opera的的web浏览器可以让普通的web网页在小型屏幕和中型屏幕上重新布局，并达到最优显示。他是第一款广泛支持Ajax和通过ACID2测试的浏览器。
3 流行的移动浏览器
手机浏览器和基于web的模拟器不同，基于web的模拟器使用一种“虚拟的手持设备”在电脑上显示wap页面，使用java或者html转码器。这些模拟器有 Wapjag, TT, Waptiger 和 Superwap。
一下表格列出了一些当下非常流行的手机浏览器。一些手机浏览器是web浏览器的精简版本，因此一些手机浏览器厂商也提供用于台式机和笔记本电脑的浏览器。
3.1 被主流手机和PDA厂商使用的内置手机浏览器
3.2 流行的用户可安装的手机浏览器
- Bolt[5]
- Bluelark Bluelark bought by Handspring Inc.
- Deepfish Beta from Microsoft, proxy-rendering browser.
- Doris by Anygraaf Oy (Vantaa, Finland)
- Fennec by Mozilla Foundation.
- IbisBrowser
- iPanel for Palm OS,
- jB5 Mobile Browser Beta from Jataayu Software.
- JOCA by InteracT!V, another proxy-rendering free software.
- Links2 on the Playstation Portable (requires custom firmware)
- Minimo by Mozilla Foundation (based on Gecko).
- NetFront
- Opera Mini by Opera Software – supports most features of stand-alone Opera, but can run on less capable phones by offloading memory-intensive rendering to proxy server (based on Opera Mobile running on a server).
- Opera Mobile by Opera Software – supports all modern web standards supported by desktop browsers, including XHTML, CSS2 and Ajax. Has advanced Small Screen Rendering that adapts regular pages to small screen (proprietary).
- Pixo by Sun Microsystems (Pixo acquired by Sun July 2003)
- PocketWeb by tlogic.de (Heidelberg, Germany) Official product page
- RocketBrowser Rocket Mobile, Inc. (Silicon Valley, CA).
- SAS
- Skweezer
- Skyfire Open Beta by Skyfire Labs. Supports Flash and Ajax and allows a fully functional PC web-like experience.
- Stanford Power Browser created in Stanford’s InfoLab [3]
- Steel
- Teashark – a free Java-based browser with a desktop-like layout [4]
- ThunderHawk by Bitstream Inc. (Cambridge, MA)
- UCWEB by UCWEB Technology
- Universe by OpenMobl Systems
- Webby Mobile by AnOriginalIdea
- WebViewer – a free Java based browser by Reqwireless
- WinWAP by Winwap Technologies Official product page
3.3 手机HTML代码转换机
手机HTML代码转换机将web内容重新格式化并压缩成移动设备可用的内容，并且必须和内置的或者用户安装的手机浏览器配合使用。以下是几个领先的手机HTML代码转换机服务。
- Skweezer – used by Orange, Etisalat, JumpTap, Medio, Miva, and others
- Teashark
- Opera Mini
4 更多
5 参考
- 无线门户的定义
- 关于Openwave Openwave.2009.2009年2月26日寻回
- Weather Underground网站为手机用户提供天气服务
- Myriad浏览器v9数据表（pdf） Myriad小组. 2009.2009年2月26日寻回
- bolt浏览器官网
6 更多外部链接
- W3C手机网页第一步 — “W3C手机网页第一步的目标是要让用户从移动设备访问网页成为现实——Tim Berners-Lee, W3C 网站的创始人之一如是说.
- 用于小型信息设备的紧凑HTML —1998年2月
- 开放移动通信联盟
- 黑莓浏览器开发者网页
- ItsNat 一个很多手机浏览器支持的基于Java的AJAX网页框架
对wiki的总结
对于wiki中提到的浏览器类型，还有两个页面可供参考
看完整篇文章后，有一些问题要问问聪明的你
- 什么是渲染引擎？什么是浏览器？这是两个最先要搞清楚的概念。
- 内置的手机浏览器，用户安装的手机浏览器和基于web的模拟器
- 每个浏览器都有相应的渲染引擎，因此有必要知道使用同一个渲染引擎的手机浏览器的页面表现是否一致
- 国内主流的浏览器机型有哪些？国内用户是否喜欢使用用户自己安装的浏览器。不管怎么样，作为一个开发人员，应该尽量去体验一下这里提到的各种用户可安装的浏览器。
- 基于web的模拟器是前期测试很有效的工具，推荐使用safari,opera和firefox(需安装插件)
- 如何保证手机网页的开发效率（包括质量和速度哦）
移动设备的表单设计：现代解决方案
移动表单往往比它们的桌面版显得有更多的限制：更小的屏幕；更慢的连接速度；更麻烦的文本输入；不胜枚举。因此，通常我们需要限制移动应用和网站中的表单数量。当你需要用户在移动设备上输入，单选按钮复选框、选择菜单和列表往往比开放文字域要好。
但是，限制孕育创新，移动表单也是一样。对移动用户的限制迫使开发和设计人员找到新的方式，令用户更快捷轻松的输入。多亏本文中涉及到的现代解决方案，移动领域也许不再避免更多的表单。相反，它可能促进表单的更多的使用。
域缩放
许多移动浏览器中，当用户选择了表单的输入域，“域缩放”功能会将其扩展到适合屏幕的可视区域的大小。这个方法令本来小小的输入域放大到足够让用户看清输入内容的大小。由于许多表单错误是由人们无法清晰辨认和修正自己的输入内容而造成的，此功能的可用性显而易见。
iPhone上的Safari浏览器和域缩放一起使用的还有一个“表单助手”功能。表单助手在放大了的输入域下方显示“上一个”、“下一个”、“自动填写”和“完成”按钮，提供给用户一个容易的方式在整个表单之间切换。不需要担心是否某个域在屏幕之外：用户只要一路点按“下一个”就不会错过了！
但是，不是每个人都会用表单助手，或者知道怎样隐藏键盘。所以，确认网页上的控件始终能让用户完成表单。围绕“提交”按钮的过多的间距会将其挤到键盘后面。
域缩放也是表单标签单列布局的原因。你可以看看Google的注册表单（如下图），当使用域缩放时，表单扩展了，两列布局中左对齐的标签却被挤出了屏幕。如果标签看不见，用户很容易忘记自己需要回答什么问题。过长的输入域也会引起这样的问题。
两列布局的表单标签在没有域缩放的移动浏览器里也经常会发生问题。任何在Android系统中使用上例的表单也要面对标签消失的问题。屏幕就是没有足够的空间同事显示输入域和相关的标签。单列布局的标签就可以避免这个问题。
输入格式
一些移动浏览器识别预定义输入类型（HTML5标准的一部分），以此来调整输入模式。举例来说，定义一个input的type为url，会显示一个带有“.”，“/”，和“.com”键的字母键盘。定义一个input的type为email，会显示一个带有 “.”和“@”键的字母键盘。而一个input的type为number的话，就会显示数字键盘。
这些关联预定义输入的键盘使得在每个要求数据带有特殊格式的输入域输入更加容易。即使没有虚拟键盘的浏览器也能从number属性获得的好处，因为用户不用被迫手动切换到数字输入法输入数字数据了。
密码遮蔽
大部分表单密码域即时遮掩用户输入的全部的字符保证敏感信息不被偷看到。自动遮掩密码看上去安全，但是也会让用户想校验密码时却只能看到一行黑点，引起了可用性问题。
许多移动设备通过显示最近输入的字符，然后过几秒将其转换成黑点来解决这个问题。这个技术在桌面已经解决了，ZURB有描述这个解决方案。
弹出菜单控件
下拉选择菜单是最难使用的输入类型之一。首先，你不得不点击一下打开它。然后你不得不卷动常常的列表找寻一个很小的目标。一旦你发现了你需要的值，你需要定位正确的位置选择它。许多下拉菜单要求你保持指针一直在菜单上方卷动，如果你移开，菜单就会关闭！
就算是敏捷的用户也常常搞错，然后需要重新选择一遍。在小屏幕移动设备上这种交互的挑战和解决方案的需求就十分明显了。
对于表单中的下拉选择菜单来说，iPhone呈现给用一个弹出菜单控件。这个控件将菜单的选项显示在一个列表里，这个列表可以用拖动、滑动等手势来控制卷动速度。巨大的触摸目标也令他很容易选中。
Android也提供了一个类似的大触摸目标给选择菜单选项。当用户点击一个下拉选择菜单，一个浮动在页面之上的对话框中显示了卷动的菜单选项列表。
图 五
复合菜单控件
弹出菜单控件也可以应用层复合输入。所以，相比要求在三个分开的输入域中选择月份、日期和年份，可以用一个date域替代。它可以显示一套弹出菜单，能让用户同时在三个列表中卷动选择正确的日期。这种方式也可以引用在其他组合之中，例如以英尺英寸为单位的高度列表。
Android也拥有复合域解决方案，通过它的视觉界面元素控制卷动列表，替换依赖手势的卷动。
原生输入控件
除了复合菜单控件，大部分移动操作系统也为应用开发者提供了很多其他的自定义输入控件。滑块、分割按钮、评级Widgets和过滤器等等都值得在设计时考虑替换标准表单控件，令用户输入更简单。
屏幕方向
由于不同的人喜欢不同方向握持移动设备，移动表单应该根据屏幕的方向调整。Android设备上的email撰写表单就是这样。
当纵向握持时，屏幕上显示三个输入域和几个操作按钮。在水平握持时，只有email正文输入域占据屏幕，并且只有一个操作按钮显示在右边。这个布局为消息内容输入最大利用了屏幕空间。
语音输入
Google的Nexus One允许用户在应用的任何文本域使用语音输入。用户可以滑动虚拟键盘切换到音频输入模式，或者按麦克风按钮也可以。在有效的语音输入支持下，在移动设备上打字输入字符将成为历史。
以后会怎样？
移动增长的非常快，越来越多的设计师和开发者注意到这个领域，我们充满希望的期待移动表单更进一步的变革。无论如何，任何使输入更快更容易的技术都将为客户带来更多的好处。
关于作者
Luke Wroblewski是一个国际知名的数码产品设计师，两本流行的网页设计书籍的作者。你可以在Twitter follow @lukewdesign 或者订阅他的RSS。
10条小代码开发iPhone友好的网站
如果要针对iPhone/iPod Touch开发移动网站，以下十条小代码几乎肯定是需要用到的，方便又有效。
侦测iPhone/iPod
开发特定设备的移动网站，首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA，然后转向到专属的URL。
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
}
}
虽然Javascript是可以在水果设备上运行的，但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输，所以下面是服务器端侦测和转向：
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
header('Location: http://yoursite.com/iphone');
exit();
}
设置viewpoint和屏幕等宽
如果不设置viewpoint，网站在viewpoint就会显示成缩略形式。如果你专门为iPhone/iPod开发网站，这一条很有用，而且很简单，只需要插入到head里就可以：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
使用iPhone规格图标
如果你的用户将你的网站添加到home screen，iPhone会使用网站的缩略图作为图标。然而你可以提供一个自己设计的图标，这样当然更好。图片是57×57大小，png格式。不需要自己做圆角和反光，系统会自动完成这些工作。然后将下面这条加入head中：
<rel="apple-touch-icon" href="images/youricon.png"/>
阻止旋转屏幕时自动调整字体大小
-webkit-text-size-adjust是webkit的私有css：
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
侦测设备旋转方向
iPhone可以在横屏状态下浏览网页，有时候你会想知道用户设备的手持状态来增强可用性和功能。下面一段Javascript可以判断出设备向哪个方向旋转，并且替换css：
window.onload = function initialLoad() {updateOrientation();}
function updateOrientation(){
var contentType = “show_”;
switch(window.orientation){
case 0:
contentType += “normal”;
break;
case -90:
contentType += “right”;
break;
case 90:
contentType += “left”;
break;
case 180:
contentType += “flipped”;
break;
}
document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);
}
iPhone才识别的CSS
如果不想设备侦测，可以用CSS媒体查询来专为iPhone/iPod定义样式。
@media screen and (max-device-width: 480px) {}
缩小图片
网站的大图通常宽度都超过480像素，如果用前面的代码限制了缩放，这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够，我们可以用CSS让iPhone自动将大图片缩小显示。
@media screen and (max-device-width: 480px){
img{max-width:100%;height:auto;}
}
注意如果原图片非常大，或一个页面非常多图，最好还是在服务器端缩放到480像素宽，iPhone只需要在正常浏览时缩略到320像素。这样不会消耗太多流量和机能。
默认隐藏工具栏
iPhone的浏览器工具栏会在页面最顶端，卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间，特别是横向屏幕时。我们可以让它自动卷动上去。
window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);
使用特殊链接
这两条不用说了吧：
<a href="tel:12345678900">打电话给我</a>
<a href="sms:12345678900">发短信</a>
模拟:hover伪类
因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：
var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);
myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);
}
然后用CSS增加hover效果：
a:hover, a.hover { /* 你的hover效果 */ }
这样设计一个链接，感觉可以更像按钮。并且，这个模拟可以用在任何元素上。
参考资料：
iPhone CSS—tips for building iPhone websites
iPhone & iPod Detection Using Javascript
iPhone Development: 12 Tips To Get You Started
Tutorial: Building a website for the iPhone
