基于Symbian3的产品开发包（PDK）已经可以下载了。这个PDK包含了完整的Symbian3系统，让你使用新的功能，也有一个全新的主题“Fresh”。

<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的文章里有制作一个例子，可以去试试看。

的iPad专用版Gmail页面基于去年为iPhone和Android手机推出的移动版Gmail HTML5网页应用。区别就在于他们针对iPad的1024×768分辨率进行了专门优化，让用户使用触摸操作更加舒适方便。

另外Google还表示，明天用户买到iPad后会发现，其使用Google各项网页服务时，有的会出现和桌面版完全相同的界面，有的则基于原本针对智能手机的移动版本。由于iPad无论从尺寸到分辨率都介于普通PC和手机之间，Google会“因地制宜”为每款应用选择最合适的界面提供给iPad用户。

如果你现在就像试试，iPad的UA如下：

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

你知道该怎么做的。

想为Maemo5做设计? 在这里有一些图标。

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

域缩放

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

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

如果是为Maemo 5开发web apps、WRT Widgets或适配网站，就可以使用这资源了。

http://www.forum.nokia.com/document/Maemo_5_Icon_List/