在过去的几年中，移动网络的使用大大地增加，以至于Web开发人员和设计人员再也不能无视它们了。在发达国家，更快的移动宽带连接和更便宜的数据服务正在推动着这种变化。然而，在发展中国家也是惊人的增长，因为人们都跳过购买个人电脑而直接购买移动设备了。
不幸的是，移动领域引入了一层复杂性，开发人员不容易适应。移动设备上的开发是跨平台的而不再是跨浏览器了。移动设备的多样化使得全面测试在实际上不大可能，迫使开发人员不得不离开那些只需要考虑支持传统浏览器的令人怀念的日子。
除了支持不同的平台，每个设备可能使用任意的移动Web浏览器。例如，一个Android用户访问站点可以使用本机Android浏览器，也可能是安装的Opera Mini或Firefox的移动版本。这是好事情，智手机逐步使用Web浏览器（而且可以肯定的说现在大多数浏览器是改进了的），但它不是必须的。
Source: Nielsen Study, Image credit
移动互联网重新引入近年来基本上被忽略的几个问题。第一，即使与4G网络，带宽是移动消费者最严重的问题。此外，移动设备的屏幕尺寸显著减小，目前的屏幕尺寸在自投影显示器以来已经不存在。结合跨平台兼容性的问题，不难看到移动开发很像’时间倒退’。因此，让我们一起解决这些问题，并建立一个用于移动网络开发的路线图：
怎样引入移动设备的样式表
网站要支持移动设备的第一步就是引入一个专门为移动设备而调整的特定样式表：
引入移动样式表的一种方法是涉及到使用服务器端语言如PHP检测用户代理字符串。有了这项技术，站点可以检测来访的移动设备，要么提供一个合适的样式表或者给用户重定向到子域名，例如m.facebook.com。这个服务器端方法有几个优点：它保证了最高级别的兼容性，同时允许网站为移动用户作特别的标记或内容。
尽管该技术对于企业级网站已经十分完善，不过还有一些对于大多数网站来说难以落实的实际问题。新用户代理字符串几乎每天都有，因此保留当前的UA名单几乎是不可能的。此外，这种方法可行与否很大程度上取决于设备转达的用户代理是否真实。即便如此，在过去浏览器都有欺骗性用户代理字符串绕过这种检测。例如，在90年代大多数的用户代理字符串依然是以“Mozilla”开始，以用于Netscape检测，有好几年Opera伪装是IE浏览器。正如彼得保科赫写道：
“这是一场军备竞赛。如果设备检测执行，浏览器将开始通过自己的用户代理字符串欺骗，以逃避检测的准确性“（译者：因为早些年的时候，有些网站只支持某种浏览器，所以有些浏览器会冒充。）
作为替换，最简单的方法是在移动设备的客户端上检测。引入移动样式表的最早技术之一就是利用样式表的媒体类型，例如：
1 |
<link rel="stylesheet" href="site.css" media="screen" /> |
2 |
<link rel="stylesheet" href="mobile.css" media="handheld" /> |
在这里，我们引入两个样式，第一个site.css的目标是使用屏幕媒体类型的台式机和笔记本，而第二mobile.css的目标是使用手持移动设备的。这本来是一个很好的方法，但设备支持成了另一个问题。旧版的移动设备倾向于支持手持媒体类型，但他们具体实施又各不相同：一些禁用屏幕样式表只加载手持设备，而其他可能两个都加载。
此外，大多数较新的设备已经不再完全将手持区别出来，因为这样他们的用户可以体验功能齐全的而不是布局乏味的网页。为了支持新的设备，我们就需要使用媒体查询，这样我们能够确定设备宽度锁定样式表（你可以看到其他关于媒体查询适应文章——伊森马科特的Responsive Web Design）。由于移动设备通常有较小的屏幕，我们可以通过探测屏幕是480像素还是更小，从而锁定手持设备：
"stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>
虽然这个可以锁定大多数较新的设备，但许多老设备不支持媒体查询，所以我们需要一种混合方法来获得最大的市场渗透（兼容）。
首先，定义两个样式：正常浏览器的screen.css, 以及用于覆盖不想在移动设备上执行的样式antiscreen.css。这两个样式表一起放到另一个样式表core.css：
1 |
@import url("screen.css"); |
2 |
@import url("antiscreen.css") handheld; |
3 |
@import url("antiscreen.css") only screenand |
4 |
(max-device-width:480px); |
最后，定义另一个样式表handheld.css附加专门为移动浏览器定制的优势，引入到页面上。
1 |
<linkrel="stylesheet"href="core.css"media="screen"/> |
2 |
<linkrel="stylesheet"href="handheld.css"media="handheld, |
3 |
only screen and (max-device-width:480px)"/> |
尽管这个技术已经获得了移动设备中大部分的市场份额，但绝对还不算完美的。一些移动设备比如iPad会超过480像素宽，不会不适用此方法。不过，这些较大的设备也可以说不需要压缩过的移动布局。展望未来，可能会有更多的设备不适合这一模式。不幸的是，移动设备面向未来的侦测是非常困难的，因为标准仍在不断更新。
除了设备检测之外，媒体查询方法也遇到其他问题。大多数情况下，媒体查询只能控制内容的样式不同，没有提供对内容传送的控制。例如，媒体查询可以用来隐藏侧栏的内容，但它不能阻止内容被用户下载。考虑到移动带宽的问题，这些额外的HTML应该不能简单地忽略。
考虑到移动设备的用户代理检测的困难和媒体查询的缺陷，一些公司，如IKEA（宜家）相用户提供选择允许用户决定是否要查网站的移动版本。尽管需要更多的用户交互是明显的缺点，它无疑是最傻瓜型的方法，也是最容易实现的。
该网站包含一个链接“请访问我们的移动网站”，把用户引导到移动版本的子域名。这种方法有一些缺点。当然的，有些手机用户可能会忽略这个链接，而其他非手机访问者也可以点击它，因为它总是可见的，无论什么用户使用什么设备。即便如此，这种技术具有其优势，允许用户做出浏览移动版本的决定。有些用户喜欢专门为其设备而优化的简明布局，而一些用户可能更愿意在不受限的情况下访问整个网站。
移动样式表需要哪些更改
现在，我们已经实现移动样式表的引入，是时候静下心来处理那些实际上需要改变的样式。
移动样式表的主要目标是把布局改变为一个较小的形式。首先，这意味着减少多列布局变成单列。大多数手机屏幕是垂直的，所以横向空间变得更“贵”，移动布局负得起超过一列的内容列。其次，通过设置dispaly:none; 降低整个页面的冗余;对任何减少的重要因素。最后，通过减少外边距和内边距来节省额外像素从而创建一个更严格的布局。
移动样式表的另一目标是减少本来就较慢的移动网络带宽的使用。首先，请确保删除或替换任何大背景的图片，特别是如果你为整个网站设置了背景图片。此外在那些不必要显示的内容设置display:none 。
如果网站使用图片作为按钮或导航，请考虑用同样功能的纯文本/CSS。最后，如果你会乐意强制浏览器为每个图像使用替代文字，使用这个代码（使用JavaScript来为img添加文本类as-text，并确保Alt属性在内容中正确的定义）：
img.as-text { content: attr(alt); }
除了解决屏幕尺寸和带宽问题外，移动样式还有一些必须做的额外的更改。首先，你可以通过增加任何小型或中型文字的字体大小提高可读性。接下来，移动设备的点击一般是缺乏精确的，所以重要的按钮和链接一定要增加可点击区域，可以通过display:block或者增加点击元素的padding。
此外，浮动元素可能会导致移动布局问题，因此可以考虑取消不必要的浮动。请记住，横向空间在移动设备是奢侈的，所以你应该总是选择加入垂直的滚动，而不是水平的。
最后，鼠标悬停状态在大多数移动设备上是无效的，因此要确保激活状态有合适的定义。此外，有时使用已经定义的也是有效的：悬停状态改为激活状态。这个伪类是当用户点击一个项目的显示，因此在移动设备上有效。然而，这仅仅是增强了用户体验，不应依赖于那些更重要的元素，例如下拉式导航。在这种情况下，在移动设备最好还是总是显示所有的链接。
样式表之外
除了移动样式，我们可以通过标记添加一些特殊的移动功能。
首先，大多数手持设备包括手机都可以，因此，让我们的电话号码可以点击：
<ahref="tel:15032084566"class="phone-link">(503) 208-4566<a>
现在，移动用户可以点击这个数字进行呼叫，但有几个问题需要注意。首先，在实际的链接地址号码以1开头是很重要的，因为网络是国际化（1是美国国家代码）。
第二，这是可以点击的链接，而不管用户是否正在使用移动设备。由于我们没有使用上述的服务器端方法，我们最好的选择通过CSS简单地隐藏这个号码的可点击。因此，使用类phone-link来禁用屏幕上的显示，然后针对移动设备引入。
当涉及到移动浏览，另一个值得关注的问题是相对于标准全尺寸键盘的打字困难。但是我们可以利用一些特别的HTML5输入让事情简单一些：
1 |
<inputtype="tel"/> |
2 |
<inputtype="email"/> |
这些输入方式允许设备如iPhone根据输入的相关而显示相应的键盘。如上述例子 type=“tel”引发出合适的数字键盘输入电话号码，而type =“email”则触发键盘上的@和.按钮。
HTML5的输入类型还提供了浏览器内置的输入验证和特殊的输入菜单，在移动和非移动浏览器都可用。此外，由于不支持这些输入类型的浏览器会把这些特别的输入方式默认为type="text"，所以使用HTML5对现有的网站也不会有什么损失。
要查看HTML5输入类型的完整列表，你可以在Estelle Weyl的文章《HTML5输入属性和浏览器支持》找到一些关于当前浏览器支持HTML5输入属性的信息。
现代的移动设备渲染一个网页的时候，他们会缩放页面内容以适应设备的视窗或可见区域。虽然默认的视窗尺寸对于大多数布局还算良好，但有时改变窗口还是好的。这可以通过使用一个由苹果公司推出的标签，这个标签已经被其他设备制造商采用。在文件中的包含这个代码：
<meta name="viewport" content="width=320" />
在这个例子中，我们把视窗设置成320，就是说页面的320像素会在设备的宽度上显示。
视窗的meta标签还可以拿来禁用页面的缩放：
<metaname="viewport"content="width=320,user-scalable=false"/>
然而，这种技术类似于禁用滚动条，使得用户脱离控制，所以不要滥用。
此外，它还可以为设备添加基于方向的样式。就是说，用户垂直或水平使用手机的时候使用不不同的样式表。
为了检测设备的方向，我们可以使用一个前面讨论过的类似于媒体查询的客户端设备检测。在样式表中引入：
1 |
@import url("portrait.css") alland |
2 |
(orientation:portrait); |
3 |
@import url("landscape.css") alland |
4 |
(orientation:landscape); |
这里的portrait.css样式是为垂直设备增加的，landscape.css则用于水平方向的。
但是并不是所有设备支持关于方向的媒体查询，所以最好配合最大宽度的媒体查询。简单地在为不同方向的宽度套用不同的宽度查询。这是一个更有效的做法，针对宽度确定不同方向。
针对iPhone/iPad的特别关照
iPhone市场占有28％，而移动浏览占有则高达50％，所以对iPhone特别关照的开发是有道理的。
不管苹果是否缺德，现实情况是iPhone不支持Flash除非他们越狱。幸运的是，有Flash的替代品，而且与此技术相关的iPhone问题往往很容易解决。Flash在现代网站的主要用途是Flash视频，使用HTML5视频可以很轻松的绕过。然而，由于旧的浏览器不支持HTML5，所以一定要为对不支持HTML5的浏览器做一个后备（这就是为什么关于Flash vs HTML5的整个辩论有点无聊，因为你实际上可以同时提供给用户，而用户设备会自动选择一个来渲染）。
除了视频，通常最好使用JavaScript来实现任何简单的功能。如jQuery，可以很容易地建立非Flash的丰富的交互式应用程序。无论是否乐意支持iPhone，这些JavaScript应用程序作为Falsh的替代品具有莫大的好处。
最后，某些应用程序使用HTML5和Javascript重建实在太难，对于这些应用iPhone用户将不得不被排除在外，但一定要包括适当的替换内容。
Adobe的讽刺“We Love Apple”活动，活动的核心是替代插件图标。
Besides Flash, there are a few additional caveats to supporting iPhones and iPads.
除了Flash，支持iPhone和iPad还需要注意其他一些地方。
首先，iPhone不支持，因为没有内部文件结构访问权。大多数移动设备连接计算机可以作为一个外部硬盘驱动器，而苹果公司已采取步骤，以确保iPhone文件结构保持混乱。
然后，iPhone的缓存文件只有25 KB或更少，所以尽量保留任何重用的文件以便低于这个限制。这跟直觉相反，因为这往往意味着分割大型图像，分散JavaScript。不过要小心为这些文件只是针对iPhone，否则将在其他浏览器导致额外的HTTP请求。
最后，当涉及到@font-face嵌入，iPhone的Mobile Safari不完全支持而是支持SVG文件格式。然而，SVG字体只有Chrome，Opera和iPhone支持，所以针对所有的浏览器我们需要一种混合方法。除了SVG的，我们还需要Firefox和Safar的.otf 或者.ttf 。以及一个用于IE的EOT（实际上IE4就已经开始支持@font-face）。
获得必要的文件之后，在CSS中配合使用：
1 |
@font-face { |
2 |
font-family: 'Comfortaa Regular'; |
3 |
src: url('Comfortaa.eot'); |
4 |
src: local('Comfortaa Regular'), |
5 |
local('Comfortaa'), |
6 |
url('Comfortaa.ttf') format('truetype'), |
7 |
url('Comfortaa.svg#font') format('svg'); |
8 |
} |
更多信息，请阅读这篇关于跨平台字体支持的文章。
尽管iPhone有各种弊端，这个设备还是提供了非常丰富的用户体验，开发人员可以充分利用其他移动设备所不可能提供的方式。
首先，有很多JavaScript库可用于访问iPhone更高级的功能。看看SenchaTouch，jQTouch以及iui，这三个库允许你设计更好的iPhone界面，其他设备如Android也起作用。此外，继续关注期待已久jQuery Mobile，它刚刚发布α版本。
接下来，App Store并不是让你的图标在用户iPhone上显示的唯一方式：你可以简单地让他们的书签标记你的网页。不幸的是，默认书签图标是网页画面的缩略图，这通常看起来不太好，所以让我们可以建一个特别的iPhone图标。相关的详细信息，查看Jon Hicks的图标参考图表。
先把一个57 × 57像素的PNG放到你的网站上，然后添加这个代码：
<link rel="apple-touch-icon" href="/customIcon.png"/>
不要担心圆角或镜面效果，iPhone会默认添加的。
结论
随着全球移动化的持续转移，手持设备的支持将变得越来越重要。希望这篇文章能给你带来愿望和有用的帮助，使得你网站对移动设备的支持可以付诸现实。
虽然移动浏览占据了全球网络浏览的一大块，这个技术仍然仅仅处于起步阶段。正如桌面浏览器标准的出现，新的标准也正在兴起以统一移动浏览器。这意味着，这篇文章中所描述的技术只是暂时的，但走在不断变化的技术前端是你的责任。
事实上，在Web开发中唯一不变的真理是永远需要继续学习！
(注意：由于译言编辑器的问题，有些代码部分似乎有缺失，如发现问题读者可以参考原文。)
编译：MazingTech
文章评论