（译）如何建立一个移动网站

（译）如何建立一个移动网站

十二2

Year 2010磊土设计与交互

在过去的几年中，移动网络使用的大幅增加已发展到了一定规模，以至于Web开发人员和设计人员再也不能忽视它。在发达国家，这种转变正在被更快的移动宽带连接和更便宜的数据服务推动着。然而，这种大幅增加在发展中国家也被看到，人们已经跳过购买pc而直接选择手机。

不幸的是，移动领域引入了一层复杂性，开发人员很难适应。移动开发不只是跨浏览器，它应该是跨平台的。在繁多的移动设备上深入的做实际测试是不可能的，开发人员只能怀念只需要支持传统浏览器的日子了。

除支持不同的平台之外，每个设备也可以使用多种移动浏览器。 例如，一个Android用户使用本机Android浏览器访问您的站点的同时,也可能安装了Opera Mini 和 Firefox移动浏览器。 只要smartphone使用的是先进的浏览器(ps.安全的说,当今的大多数浏览器都是先进的)，您的站点就能够很好的被访问,但是它不是必须的。

近年来,移动互联网重新引入了几个被忽略的问题。首先，即使已用上4G网络，带宽也已成为移动消费者的严重问题。此外，移动设备的屏幕尺寸显著缩小，使得屏幕的可使用面积问题又显现出来，这个问题自从投影显示器时代就不存在了。结合这些与跨平台的兼容问题，人们不难看到移动开发很像’时光倒流’。因此，让我们在同一时间解决这些问题，并创建一个用于移动网络发展的路线图：

l  如何实现移动样式

l  如何改变移动样式

l  跨过移动样式

l  对iPhone/ ipad的特殊关怀

如何实现移动样式

第一步，为网站加入移动支持，包括调整用于移动设备的特殊CSS样式：

服务器端方法和UA(用户代理) 字符串

一种引入移动样式的方法需要利用服务器端语言例如PHP监测用户代理字符串。用这项技术，站点检测移动设备，要么提供一个合适的样式表要么重定向到用户移动子域名，例如m.facebook.com。这个服务器端的方法有几个优点：它保证了最高级别的兼容性，同时允许该网站为移动用户提供特别的标记/内容。

虽然该技术对企业级网站支持完善，但对大多数网站来说还有一些难以落实的实际问题。新的用户代理字符串几乎每天都有，所以要保持当前最新的UA名单是几乎不可能的。此外，这种方法在很大程度上取决于其真正的用户代理中继设备上。即便如此，在过去，浏览器为了避开这种检测会伪造UA。例如，大多数UA依然开始以“Mozilla”为引擎，通过在90年代使用的Netscape检查，并且连续几年Opera假装是IE浏览器。正如Peter-Paul Koch写道：

“这是一场军备竞赛。如果设备检测真的流行起来，浏览器将开始伪造自己的用户代理字符串结束正确方面的检测。”

客户端的方法及媒体查询

或者，最简单的方法包括检测客户端上的移动设备。其中涉及移动样式最简单的技术包括利用样式媒体类型，例如：

12

<link rel="stylesheet" href="site.css" media="screen" /><link rel="stylesheet" href="mobile.css" media="handheld" />

在这里，我们已经包括了两个样式，第一个site.css主要应用于是台式机和笔记本使用的屏幕媒体类型，而第二个mobile.css主要是应用于手持移动设备目标类型。虽然这本来是一个很好的方法，但设备的支持是另一个问题。老的移动设备倾向于支持手持媒体类型，但他们在实施起来各不相同：有些是禁用屏幕样式表和只加载手持设备，而其他是两个都支持。

此外，大多数较新的设备已经不再完全区别手持，以便为他们的用户提供功能齐全的网络，而不是乏味移动布局网页。为了支持新的设备，我们就需要使用媒体询问，这使我们能够定位样式的设备宽度（你可以在Ethan Marcotte的文章<响应性的Web设计>中看到其他媒体查询的实际适应情况）。由于移动设备通常屏幕较小，我们可以通过探测480px及以下的屏幕来检测手持设备：

1

<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>

然而这个目标只支持大多数较新的设备，许多老设备不支持媒体询问，所以我们需要一种混合的方法来获得最大的市场渗透。

首先，定义两个样式：用于任何正常浏览器的screen.css和您不想在移动设备上应用的覆盖任意样式的antiscreen.css。把这两个样式绑定在一起放到另一个样式表core.css中：

123

@import url("screen.css");@import url("antiscreen.css") handheld;@import url("antiscreen.css") only screen and (max-device-width:480px);

最后，定义另一个样式表handheld.css用于为移动浏览器的其他样式并把它链接到页面上：

123

<link rel="stylesheet" href="core.css" media="screen"/>  <link rel="stylesheet" href="handheld.css" media="handheld,  only screen and (max-device-width:480px)"/>

尽管该技术达到了移动设备中的大部分市场份额，但绝不是完美的。如iPad的一些移动设备超过480像素宽，不会使用此方法。但是，这些大型设备可以说是不需要缩小的移动布局。展望未来，有可能会有更多的设备，不适合这一模式。不幸的是，这是非常困难的面向未来的移动侦测，因为标准仍在不断涌现。

除设备检测以外，媒体查询方法也出现其他问题。主要是，媒体查询只能是样式内容不同，没有提供对内容交付控制。例如，媒体查询可以用来隐藏侧栏的内容，但它不能阻止该标记被用户下载。由于移动带宽问题，这个额外的HTML应该不能简单地被忽略。

用户启动的方法

考虑到移动UA检测的困难和媒体查询的缺陷，一些公司如IKEA已经选择了一些简单的让用户决定是否要查看他们的网站的移动版本。尽管这有需要更多用户交互的明显缺点，它无疑是最傻瓜型的证明方法，也是最容易实现的目标。

该网站包含一个写着“请访问我们的移动网站”导航，它引导用户到移动子域名上的链接。这种方法有一些缺点。当然，有些手机用户可能未点击链接，有些其他非手机访问者可能点击了它，因为无论使用哪种设备它都是可见的。即便如此，这种技术具有允许用户做出决定的移动优势。有些用户喜欢用简明的布局，来优化他们的设备，而其他用户愿意不受设备画面大小的限制而可以进入整个网站。

如何改变移动样式

现在，我们已经实现移动样式，是时候着手具体细节了，我们其实是想改变它。

增加和改变屏幕实际使用尺寸

移动样式表的主要目标是为较小的屏幕改变布局。首先，这意味着减少多列布局以单列显示。大多数手机屏幕是垂直的，所以横向空间变得更“珍贵”，移动布局很少能提供一个以上的内容列。其次，通过设置display: none; 降低页面中一些不重要的元素杂乱。最后，通过减少margins and padding而能节省更多的像素来创建一个更严谨的布局。

减少带宽

另一种移动样式的目标是减少较慢的移动网络带宽。首先，请确保删除或替换任何大背景图像，特别是如果您为整个网站使用背景图片。此外在任何不必要的内容图片上设置display:none

如果您的网站使用的是按钮或导航的图像，考虑用纯文本/ CSS这些替换。最后，如果你想强制浏览器使用您的任何图像替代文字，使用这个片断（使用JavaScript为img添加as-text class，并确保Alt特性的文字在你的标记中被正确定义）：

1

img.as-text { content: attr(alt); }

除了解决屏幕尺寸和带宽的问题，还有一些额外的变化应该在所有移动样式中作出。首先，你可以通过加大小号或中号字体来提高文字的可读性。其次，点击通常在移动设备上是不精确的，所以确保通过对可点击元素设置display: block和添加填充来增加所有重要按钮或链接的可点击区域。

此外，浮动元素可能会导致移动布局问题，因此考虑取消任何没有绝对必要的浮动元素。请记住，横向使用面积在移动设备上是特别珍贵的，所以你应该总是选择加入垂直滚动，而不是水平的。

最后，鼠标悬停状态不能够用于大多数移动设备，因此要确保:active状态有适当的定义。此外，有时也可能是从已经定义的：hover状态至：active状态的有用应用。此伪类是当用户点击一个项目时显示的，因此它将工作于移动设备上。然而，这不仅增强了用户体验，不应依赖更重要的元素，例如下拉式导航。在这种情况下，最好是在移动设备任何时候显示所有链接。

跨过移动样式

除了移动样式，我们可以通过标记添加一些特殊的移动特性。

可点击的电话号码

首先，大多数手持设备包括手机，因此，让我们的电话号码可以被点击：

1

<a class="phone-link" href="tel:[phone]">[phone]</a>

现在，移动用户可以点击这个数字来呼叫它，但有几件事情需要注意。首先，在实际的链接号码开始处加上1是很重要的，因为网络是国际化的（1是美国国家代码）。

第二，这是可以点击的链接，无论用户是否有一个移动设备。由于我们没有使用服务器端上述方法，我们最好的选择是简单地掩盖一个事实，这个数字是通过CSS可点击的。因此，使用手机连结类禁用屏幕样式的链接样式，然后再应用于移动设备。

特殊的输入类型

当谈到移动浏览时，另一个值得关注的是相对于标准的全尺寸键盘打字的困难。但是我们可以有效利用一些特殊的HTML5的输入类型让它能够在我们的用户中做的更容易：

12

<input type="tel" /><input type="email" />

这些输入类型允许像iPhone这样的设备来显示一个通过上下文关系的键盘输入方式。在上述例子中type=“tel”触发了一个理想的输入电话号码的数字键盘，type=“email”触发了一个@和.按钮的键盘。

HTML5的输入类型还提供了浏览器的验证和特殊输入菜单，这在移动和非移动浏览中都是有用的。此外，由于不支持浏览器的自然降级查看这些特殊输入类型如<input /> ，没有在你的网站中使用HTML5的输入类型在今天是没有损失的。

看一下HTML5的输入类型的完整列表。你可以在Estelle weyl写的html5输入属性&浏览器支持中找到一些有关当前浏览器支持HTML5的输入属性。

视口尺寸及取向

当现代的移动设备渲染网页时，他们会缩放页面内容以适应自己的视窗或可见区域。虽然默认的视图面积对于大多数布局运作良好，有时是有益的改变视口。这可以使用由苹果公司推出的<meta>标签，并且至今已由其他设备制造商重新拾起。在文档的<head>里包括这个片段：

1

<meta name="viewport" content="width=320" />

在这个例子中我们设置了视口宽度为320px，这意味着页面的320像素将在整个设备的宽度中可见。

视口中的meta标记，也可被用于禁止调整页面的大小：

1

<meta name="viewport" content="width=320,user-scalable=false" />

然而，类似禁用滚动条，这种技术需要从用户那里得到控制，并且应该使用一个很好的理由。

此外，它还可以根据设备的方向添加一定的类型。这意味着不同的样式可以被应用取决于用户持有他们的手机是否垂直或水平。

检测设备的方向，我们可以使用一个类似媒体查询的客户端设备的检测，我们前面讨论过的。在你的样式表，包括：

12

@import url("portrait.css") all and (orientation:portrait);@import url("landscape.css") all and (orientation:landscape);

这里portrait.css样式将追加于垂直设备,landscape.css将用于水平

但是媒体询问取向没有得到所有的设备通过，所以用最大宽度媒体查询这是最好地实现方法。简单地套用在不同的方向宽度要针对不同的最大宽度查询。这是一个更有力的做法，大概是因为针对不同方向是为不同宽度设计风格。

对于iPhone/ ipad特殊担忧

Iphone拥有28％的市场份额和估计高达50％的移动浏览，使得开发者对这家移动巨头给予特殊的照顾是不无道理的。

不支持Flash

不管苹果的道德，现实情况是除非他们越狱不然是无法播放flash的。幸运的是，对于flash可以二选一，用此技术的iPhone的问题往往容易得到解决。当今网站中Flash的主要用途是Flash视频，它可以很容易地绕过使用HTML5视频。然而，由于旧的浏览器不支持HTML5，一定要包括对非支持的浏览器闪存备份（这就是为什么关于Flash主场迎战HTML5的整个辩论是有点无意义的，因为你实际上可以同时提供给用户,用户的设备将使用其中一个可以自动播放的）。

除了视频，通常最好使用JavaScript以适应一些简单的功能。如jQuery JavaScript库，可以很容易地建立没有Flash的丰富交互式应用程序。无论您对支持iPhone的愿望有多大，这些JavaScript应用程序通常有一些额外的超过视频的好处。

最后，某些应用程序只是太难用HTML5和Javascript重新建立。对于这些，iPhone用户将不得不被排除在外，但一定要包括适当的替代内容。

一种欺骗Adobe的“我们喜欢苹果”的活动，其中的核心是在破旧的替代插件图标。

其他缺点

除了Flash，还有一些支持iPhone和iPad额外的说明。

首先，iPhone不支持<input /> ，因为它不具有可访问的内部文件结构。虽然大多数移动设备连接到了一个外部硬盘驱动器的计算机，苹果公司已采取步骤，以确保iPhone文件结构仍然模糊处理。

其次，iPhone缓存文件是25 KB或更少，所以尽量在这个限制下保持重用文件。这可有点反直觉的，因为它往往意味着打破了成小块大型图像JavaScript的精灵，然后连接起来。不过要小心向IPHONE提供这些文件，否则将导致额外的HTTP在所有其他浏览器的请求。

最后，当涉及到的@ font –face字体嵌入，iPhone的Mobile Safari不完全支持它，它只支持SVG文件格式来替代。然而，SVG的字体只支持Chrome，Opera和iPhone，所以我们需要一种针对所有浏览器的混合方法。除了SVG的，我们需要为Firefox和Safari提供一个.otf或.ttf，以及一个用于IE的EOT（即实际上已经开始支持IE4的@font-family）。

在获得必要的文件后，配合他们一起用适当的CSS：

1234567

@font-face {       font-family: 'Comfortaa Regular';       src: url('Comfortaa.eot');       src: local('Comfortaa Regular'),       local('Comfortaa'),       url('Comfortaa.ttf') format('truetype'),       url('Comfortaa.svg#font') format('svg');

欲了解更多信息，请阅读这个跨平台的字体面支持文章。

特别对iPhone / iPad的增强

尽管iPhone有各种缺点，但该设备提供了非常丰富的用户体验，开发人员可以充分利用移动设备，那些老的移动设备是没法比的。

首先，有多种多样的JavaScript库可用于iPhone访问更先进的功能。看看Sencha Touch，jQTouch和iui。这三个库允许您的iPhone有更好的界面，并且它们同时可工作于如Android系统的类似设备上。此外，备受期待的jQuery Mobile刚刚发布了α测试版。

接下来，在你的iphone用户中，App Store不是唯一的方式得到图标的地方：您可以简单地让他们以书签的方式显示在您的页面上。不幸的是，默认书签图标是一个浓缩的页面截图，这通常看起来不会非常好，所以让我们创建一个特殊的iPhone图标。同时参看Jon Hicks的图标参考图表检查有关详细信息。

首先，在您的网站上的某个地方节约了57 × 57像素的PNG，然后在您的<head>标签中添加这个片段：

1

<link rel="apple-touch-icon" href="/customIcon.png"/>

不要担心圆角或镜面效果，iPhone将把这些添加为默认的。

结论

随着全球继续向移动市场扩展，手持设备的支持将变得越来越重要。希望这篇文章给你留下了必要的愿望和工具，使您的网站应用移动支持成为现实。

虽然移动占据了显着的全球网络浏览块，该技术仍然处于起步阶段。正如标准桌面浏览涌现，新的标准正在兴起以统一移动浏览器。这意味着，在这篇文章中所描述的技术只是暂时的，它是你停留在这个不断变化的技术之上的责任。

事实上，在Web开发中唯一保持不变的是不断的需要继续学习！

原文：http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

Ps：本人翻译水平有限，如果哪位朋友英文好，可以参看原文。也欢迎英语高手指正翻译中的错误

（译）如何建立一个移动网站

十二2

Year 2010磊土设计与交互

在过去的几年中，移动网络使用的大幅增加已发展到了一定规模，以至于Web开发人员和设计人员再也不能忽视它。在发达国家，这种转变正在被更快的移动宽带连接和更便宜的数据服务推动着。然而，这种大幅增加在发展中国家也被看到，人们已经跳过购买pc而直接选择手机。

不幸的是，移动领域引入了一层复杂性，开发人员很难适应。移动开发不只是跨浏览器，它应该是跨平台的。在繁多的移动设备上深入的做实际测试是不可能的，开发人员只能怀念只需要支持传统浏览器的日子了。

除支持不同的平台之外，每个设备也可以使用多种移动浏览器。 例如，一个Android用户使用本机Android浏览器访问您的站点的同时,也可能安装了Opera Mini 和 Firefox移动浏览器。 只要smartphone使用的是先进的浏览器(ps.安全的说,当今的大多数浏览器都是先进的)，您的站点就能够很好的被访问,但是它不是必须的。

近年来,移动互联网重新引入了几个被忽略的问题。首先，即使已用上4G网络，带宽也已成为移动消费者的严重问题。此外，移动设备的屏幕尺寸显著缩小，使得屏幕的可使用面积问题又显现出来，这个问题自从投影显示器时代就不存在了。结合这些与跨平台的兼容问题，人们不难看到移动开发很像’时光倒流’。因此，让我们在同一时间解决这些问题，并创建一个用于移动网络发展的路线图：

l  如何实现移动样式

l  如何改变移动样式

l  跨过移动样式

l  对iPhone/ ipad的特殊关怀

如何实现移动样式

第一步，为网站加入移动支持，包括调整用于移动设备的特殊CSS样式：

服务器端方法和UA(用户代理) 字符串

一种引入移动样式的方法需要利用服务器端语言例如PHP监测用户代理字符串。用这项技术，站点检测移动设备，要么提供一个合适的样式表要么重定向到用户移动子域名，例如m.facebook.com。这个服务器端的方法有几个优点：它保证了最高级别的兼容性，同时允许该网站为移动用户提供特别的标记/内容。

虽然该技术对企业级网站支持完善，但对大多数网站来说还有一些难以落实的实际问题。新的用户代理字符串几乎每天都有，所以要保持当前最新的UA名单是几乎不可能的。此外，这种方法在很大程度上取决于其真正的用户代理中继设备上。即便如此，在过去，浏览器为了避开这种检测会伪造UA。例如，大多数UA依然开始以“Mozilla”为引擎，通过在90年代使用的Netscape检查，并且连续几年Opera假装是IE浏览器。正如Peter-Paul Koch写道：

“这是一场军备竞赛。如果设备检测真的流行起来，浏览器将开始伪造自己的用户代理字符串结束正确方面的检测。”

客户端的方法及媒体查询

或者，最简单的方法包括检测客户端上的移动设备。其中涉及移动样式最简单的技术包括利用样式媒体类型，例如：

12

<link rel="stylesheet" href="site.css" media="screen" /><link rel="stylesheet" href="mobile.css" media="handheld" />

在这里，我们已经包括了两个样式，第一个site.css主要应用于是台式机和笔记本使用的屏幕媒体类型，而第二个mobile.css主要是应用于手持移动设备目标类型。虽然这本来是一个很好的方法，但设备的支持是另一个问题。老的移动设备倾向于支持手持媒体类型，但他们在实施起来各不相同：有些是禁用屏幕样式表和只加载手持设备，而其他是两个都支持。

此外，大多数较新的设备已经不再完全区别手持，以便为他们的用户提供功能齐全的网络，而不是乏味移动布局网页。为了支持新的设备，我们就需要使用媒体询问，这使我们能够定位样式的设备宽度（你可以在Ethan Marcotte的文章<响应性的Web设计>中看到其他媒体查询的实际适应情况）。由于移动设备通常屏幕较小，我们可以通过探测480px及以下的屏幕来检测手持设备：

1

<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>

然而这个目标只支持大多数较新的设备，许多老设备不支持媒体询问，所以我们需要一种混合的方法来获得最大的市场渗透。

首先，定义两个样式：用于任何正常浏览器的screen.css和您不想在移动设备上应用的覆盖任意样式的antiscreen.css。把这两个样式绑定在一起放到另一个样式表core.css中：

123

@import url("screen.css");@import url("antiscreen.css") handheld;@import url("antiscreen.css") only screen and (max-device-width:480px);

最后，定义另一个样式表handheld.css用于为移动浏览器的其他样式并把它链接到页面上：

123

<link rel="stylesheet" href="core.css" media="screen"/>  <link rel="stylesheet" href="handheld.css" media="handheld,  only screen and (max-device-width:480px)"/>

尽管该技术达到了移动设备中的大部分市场份额，但绝不是完美的。如iPad的一些移动设备超过480像素宽，不会使用此方法。但是，这些大型设备可以说是不需要缩小的移动布局。展望未来，有可能会有更多的设备，不适合这一模式。不幸的是，这是非常困难的面向未来的移动侦测，因为标准仍在不断涌现。

除设备检测以外，媒体查询方法也出现其他问题。主要是，媒体查询只能是样式内容不同，没有提供对内容交付控制。例如，媒体查询可以用来隐藏侧栏的内容，但它不能阻止该标记被用户下载。由于移动带宽问题，这个额外的HTML应该不能简单地被忽略。

用户启动的方法

考虑到移动UA检测的困难和媒体查询的缺陷，一些公司如IKEA已经选择了一些简单的让用户决定是否要查看他们的网站的移动版本。尽管这有需要更多用户交互的明显缺点，它无疑是最傻瓜型的证明方法，也是最容易实现的目标。

该网站包含一个写着“请访问我们的移动网站”导航，它引导用户到移动子域名上的链接。这种方法有一些缺点。当然，有些手机用户可能未点击链接，有些其他非手机访问者可能点击了它，因为无论使用哪种设备它都是可见的。即便如此，这种技术具有允许用户做出决定的移动优势。有些用户喜欢用简明的布局，来优化他们的设备，而其他用户愿意不受设备画面大小的限制而可以进入整个网站。

如何改变移动样式

现在，我们已经实现移动样式，是时候着手具体细节了，我们其实是想改变它。

增加和改变屏幕实际使用尺寸

移动样式表的主要目标是为较小的屏幕改变布局。首先，这意味着减少多列布局以单列显示。大多数手机屏幕是垂直的，所以横向空间变得更“珍贵”，移动布局很少能提供一个以上的内容列。其次，通过设置display: none; 降低页面中一些不重要的元素杂乱。最后，通过减少margins and padding而能节省更多的像素来创建一个更严谨的布局。

减少带宽

另一种移动样式的目标是减少较慢的移动网络带宽。首先，请确保删除或替换任何大背景图像，特别是如果您为整个网站使用背景图片。此外在任何不必要的内容图片上设置display:none

如果您的网站使用的是按钮或导航的图像，考虑用纯文本/ CSS这些替换。最后，如果你想强制浏览器使用您的任何图像替代文字，使用这个片断（使用JavaScript为img添加as-text class，并确保Alt特性的文字在你的标记中被正确定义）：

1

img.as-text { content: attr(alt); }

除了解决屏幕尺寸和带宽的问题，还有一些额外的变化应该在所有移动样式中作出。首先，你可以通过加大小号或中号字体来提高文字的可读性。其次，点击通常在移动设备上是不精确的，所以确保通过对可点击元素设置display: block和添加填充来增加所有重要按钮或链接的可点击区域。

此外，浮动元素可能会导致移动布局问题，因此考虑取消任何没有绝对必要的浮动元素。请记住，横向使用面积在移动设备上是特别珍贵的，所以你应该总是选择加入垂直滚动，而不是水平的。

最后，鼠标悬停状态不能够用于大多数移动设备，因此要确保:active状态有适当的定义。此外，有时也可能是从已经定义的：hover状态至：active状态的有用应用。此伪类是当用户点击一个项目时显示的，因此它将工作于移动设备上。然而，这不仅增强了用户体验，不应依赖更重要的元素，例如下拉式导航。在这种情况下，最好是在移动设备任何时候显示所有链接。

跨过移动样式

除了移动样式，我们可以通过标记添加一些特殊的移动特性。

可点击的电话号码

首先，大多数手持设备包括手机，因此，让我们的电话号码可以被点击：

1

<a class="phone-link" href="tel:[phone]">[phone]</a>

现在，移动用户可以点击这个数字来呼叫它，但有几件事情需要注意。首先，在实际的链接号码开始处加上1是很重要的，因为网络是国际化的（1是美国国家代码）。

第二，这是可以点击的链接，无论用户是否有一个移动设备。由于我们没有使用服务器端上述方法，我们最好的选择是简单地掩盖一个事实，这个数字是通过CSS可点击的。因此，使用手机连结类禁用屏幕样式的链接样式，然后再应用于移动设备。

特殊的输入类型

当谈到移动浏览时，另一个值得关注的是相对于标准的全尺寸键盘打字的困难。但是我们可以有效利用一些特殊的HTML5的输入类型让它能够在我们的用户中做的更容易：

12

<input type="tel" /><input type="email" />

这些输入类型允许像iPhone这样的设备来显示一个通过上下文关系的键盘输入方式。在上述例子中type=“tel”触发了一个理想的输入电话号码的数字键盘，type=“email”触发了一个@和.按钮的键盘。

HTML5的输入类型还提供了浏览器的验证和特殊输入菜单，这在移动和非移动浏览中都是有用的。此外，由于不支持浏览器的自然降级查看这些特殊输入类型如<input /> ，没有在你的网站中使用HTML5的输入类型在今天是没有损失的。

看一下HTML5的输入类型的完整列表。你可以在Estelle weyl写的html5输入属性&浏览器支持中找到一些有关当前浏览器支持HTML5的输入属性。

视口尺寸及取向

当现代的移动设备渲染网页时，他们会缩放页面内容以适应自己的视窗或可见区域。虽然默认的视图面积对于大多数布局运作良好，有时是有益的改变视口。这可以使用由苹果公司推出的<meta>标签，并且至今已由其他设备制造商重新拾起。在文档的<head>里包括这个片段：

1

<meta name="viewport" content="width=320" />

在这个例子中我们设置了视口宽度为320px，这意味着页面的320像素将在整个设备的宽度中可见。

视口中的meta标记，也可被用于禁止调整页面的大小：

1

<meta name="viewport" content="width=320,user-scalable=false" />

然而，类似禁用滚动条，这种技术需要从用户那里得到控制，并且应该使用一个很好的理由。

此外，它还可以根据设备的方向添加一定的类型。这意味着不同的样式可以被应用取决于用户持有他们的手机是否垂直或水平。

检测设备的方向，我们可以使用一个类似媒体查询的客户端设备的检测，我们前面讨论过的。在你的样式表，包括：

12

@import url("portrait.css") all and (orientation:portrait);@import url("landscape.css") all and (orientation:landscape);

这里portrait.css样式将追加于垂直设备,landscape.css将用于水平

但是媒体询问取向没有得到所有的设备通过，所以用最大宽度媒体查询这是最好地实现方法。简单地套用在不同的方向宽度要针对不同的最大宽度查询。这是一个更有力的做法，大概是因为针对不同方向是为不同宽度设计风格。

对于iPhone/ ipad特殊担忧

Iphone拥有28％的市场份额和估计高达50％的移动浏览，使得开发者对这家移动巨头给予特殊的照顾是不无道理的。

不支持Flash

不管苹果的道德，现实情况是除非他们越狱不然是无法播放flash的。幸运的是，对于flash可以二选一，用此技术的iPhone的问题往往容易得到解决。当今网站中Flash的主要用途是Flash视频，它可以很容易地绕过使用HTML5视频。然而，由于旧的浏览器不支持HTML5，一定要包括对非支持的浏览器闪存备份（这就是为什么关于Flash主场迎战HTML5的整个辩论是有点无意义的，因为你实际上可以同时提供给用户,用户的设备将使用其中一个可以自动播放的）。

除了视频，通常最好使用JavaScript以适应一些简单的功能。如jQuery JavaScript库，可以很容易地建立没有Flash的丰富交互式应用程序。无论您对支持iPhone的愿望有多大，这些JavaScript应用程序通常有一些额外的超过视频的好处。

最后，某些应用程序只是太难用HTML5和Javascript重新建立。对于这些，iPhone用户将不得不被排除在外，但一定要包括适当的替代内容。

一种欺骗Adobe的“我们喜欢苹果”的活动，其中的核心是在破旧的替代插件图标。

其他缺点

除了Flash，还有一些支持iPhone和iPad额外的说明。

首先，iPhone不支持<input /> ，因为它不具有可访问的内部文件结构。虽然大多数移动设备连接到了一个外部硬盘驱动器的计算机，苹果公司已采取步骤，以确保iPhone文件结构仍然模糊处理。

其次，iPhone缓存文件是25 KB或更少，所以尽量在这个限制下保持重用文件。这可有点反直觉的，因为它往往意味着打破了成小块大型图像JavaScript的精灵，然后连接起来。不过要小心向IPHONE提供这些文件，否则将导致额外的HTTP在所有其他浏览器的请求。

最后，当涉及到的@ font –face字体嵌入，iPhone的Mobile Safari不完全支持它，它只支持SVG文件格式来替代。然而，SVG的字体只支持Chrome，Opera和iPhone，所以我们需要一种针对所有浏览器的混合方法。除了SVG的，我们需要为Firefox和Safari提供一个.otf或.ttf，以及一个用于IE的EOT（即实际上已经开始支持IE4的@font-family）。

在获得必要的文件后，配合他们一起用适当的CSS：

1234567

@font-face {       font-family: 'Comfortaa Regular';       src: url('Comfortaa.eot');       src: local('Comfortaa Regular'),       local('Comfortaa'),       url('Comfortaa.ttf') format('truetype'),       url('Comfortaa.svg#font') format('svg');

欲了解更多信息，请阅读这个跨平台的字体面支持文章。

特别对iPhone / iPad的增强

尽管iPhone有各种缺点，但该设备提供了非常丰富的用户体验，开发人员可以充分利用移动设备，那些老的移动设备是没法比的。

首先，有多种多样的JavaScript库可用于iPhone访问更先进的功能。看看Sencha Touch，jQTouch和iui。这三个库允许您的iPhone有更好的界面，并且它们同时可工作于如Android系统的类似设备上。此外，备受期待的jQuery Mobile刚刚发布了α测试版。

接下来，在你的iphone用户中，App Store不是唯一的方式得到图标的地方：您可以简单地让他们以书签的方式显示在您的页面上。不幸的是，默认书签图标是一个浓缩的页面截图，这通常看起来不会非常好，所以让我们创建一个特殊的iPhone图标。同时参看Jon Hicks的图标参考图表检查有关详细信息。

首先，在您的网站上的某个地方节约了57 × 57像素的PNG，然后在您的<head>标签中添加这个片段：

1

<link rel="apple-touch-icon" href="/customIcon.png"/>

不要担心圆角或镜面效果，iPhone将把这些添加为默认的。

结论

随着全球继续向移动市场扩展，手持设备的支持将变得越来越重要。希望这篇文章给你留下了必要的愿望和工具，使您的网站应用移动支持成为现实。

虽然移动占据了显着的全球网络浏览块，该技术仍然处于起步阶段。正如标准桌面浏览涌现，新的标准正在兴起以统一移动浏览器。这意味着，在这篇文章中所描述的技术只是暂时的，它是你停留在这个不断变化的技术之上的责任。

事实上，在Web开发中唯一保持不变的是不断的需要继续学习！

原文：http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

Ps：本人翻译水平有限，如果哪位朋友英文好，可以参看原文。也欢迎英语高手指正翻译中的错误