<link rel="stylesheet" media="screen and (max-width: 320px)" href="portrait.css" />
<link rel="stylesheet" media="screen and (min-width: 321px)" href="landscape.css" />

而iPad有点不同，它直接使用了媒体查询中的orientation属性。是这样：

<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css" />

之后只要将不同的样式分别定义出来就可以了。在桌面平台测试的话，firefox，Safari和Chrome都支持方向属性，只需要改变窗口让高度大于宽度，就会识别为纵向屏幕。

Cloud Four Blog的文章里有制作一个例子，可以去试试看。

但是，限制孕育创新，移动表单也是一样。对移动用户的限制迫使开发和设计人员找到新的方式，令用户更快捷轻松的输入。多亏本文中涉及到的现代解决方案，移动领域也许不再避免更多的表单。相反，它可能促进表单的更多的使用。

域缩放

许多移动浏览器中，当用户选择了表单的输入域，“域缩放”功能会将其扩展到适合屏幕的可视区域的大小。这个方法令本来小小的输入域放大到足够让用户看清输入内容的大小。由于许多表单错误是由人们无法清晰辨认和修正自己的输入内容而造成的，此功能的可用性显而易见。

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。

侦测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

hover pseudoclass for the iPhone

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1 user-scalable=no, width = 320" /> <meta name="viewport" content="width=device-width; initial-scale=1.2; maximum-scale=1.2; user-scalable=0;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

这些会告诉iPhone怎样渲染widget，放大到多少显示，至少告诉iPhone，这个页面是一个web app。

Safari JavaScript数据库编程

HTML5标准为客户端数据存储提供了新的机制，也就是JavaScript数据库的支持。可以使用它在本地存储一些数据，制作离线web应用。最新的Safari 3.1和iPhone OS 2.0已经支持HTML5。

HTML5 应用缓存

iPhone OS 2.1会支持到HTML5应用缓存，当你制作的web应用定义了是基于HTML5规范制作的，那么在用户可以将应用通过使用Safari上的加号增加到Home界面，应用存储于缓存并在主界面显示。

1. 中国发放3G牌照：中国移动TD-SCDMA， 中国电信CDMA2000，中国联通 WCDMA。这是大家都能分析出来的。而且几乎是板上钉钉的 事了。
2. 操作系统战争：基于Andriod的终端会出5-10款左右，包括HTC为中国移动定制的那台；基于开放源代码的Symbian OS的终端也在今年出现；iPhone推出低端版本，并且终于在中国上市；而windows mobile系列的终端则继续维持现在的样子。
3. 浏览器：Mozilla会正式发布Fennec；Opera Mini也会发布新版本，在速度和用户界面会有新的提高（比如支持多标签浏览），并且可能支持Flash；Flash Lite 3的大量普及，更多的移动网站开始尝试Flash和AIR应用。
4. LBS：中国可能出现第一个真正意义上的LBS，会是 谁呢？UCWEB、腾迅、饭否、康盛、某个 SNS？还是一家从未听说的公司。
5. 移 动支付：各大银行开始推出全面的手机银行，其中包括账户 的支出。但是对外的支付接口并不会推出。移动支付还是倾向于 SP在运营商账户扣款的方式。
6. 移动广告：由于这个市场在中国还未形成，几乎不会有广告商投入，但是在国外，随着08年的起步会开始走向发展阶段。
7. 厂商：至少一个大牌会倒闭或被收购，可能是摩托罗拉哦；OVI进入中国；中兴或华为可能会在全球硬件市场获得大份额。
8. 资费与流量：中国的3G资费将与GPRS等接入费用持平，与现有资费标准相比有所降低；更多的人开始使用网络，流量会将近翻番。
9. 开发者：由于3G牌照的发放和正式建设，为了 解决就业问题，更多新的开发者走向移动开发。我 们可能会开论坛，呵呵。