PHP类Web网站适应移动设备十贴士

【编者按】相比较桌面端，用户越来越多的从移动设备端访问网页，这已经不是什么新鲜事。然而开发者还是需要努力去让网站更好的适应现在的移动设备，与此同时，从谷歌最近宣布的消息可以看出，它可能会惩罚那些不能为移动设备用户提供良好用户体验的网站，这

【编者按】相比较桌面端，用户越来越多的从移动设备端访问网页，这已经不是什么新鲜事。然而开发者还是需要努力去让网站更好的适应现在的移动设备，与此同时，从谷歌最近宣布的消息可以看出，它可能会惩罚那些不能为移动设备用户提供良好用户体验的网站，这也迫使开发者努力做好这方面事宜。本文介绍了一些技巧可以帮助你更好的提供良好的移动用户体验。

以下为译文：

最近，谷歌员工暗示，不能提供友好用户体验的网站将受到来自谷歌搜索通信量的惩罚，谷歌在最近几年已经介绍了多个算法的变化，伤害了许多网站的流量。

不过谷歌的惩罚不应该是你努力使网站友好的主要动机，你的主要动机应该是为你的用户提供他们想要的东西，为他们提供最好的用户体验。所以确保你的网站友好的对象是移动用户，而不是谷歌。

选择一个移动方案，着眼于更好的满足网站用户的需求

这里主要有四个方法可以为用户提供更好的移动用户体验：

1. 创建一个单独的手机网站

如果你想提供一个不同于桌面网站用户体验的移动用户体验，创建一个单独的网站，让移动用户只有一个选择。

这个解决方案可能在某些情况下有意义，但是由于其过程类似于建立一个全新的网站，因此许多Web开发者都避免这种方法。

由于谷歌认为这样的移动用户网站是不同于桌面网站的另一个网站，所以你应该在桌面网站设置一个rel=alternate链接tag，类似于：

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1">

而在移动网站页面应包含rel=canonical链接tags，类似于：

<link rel="canonical" href="http://www.example.com/page-1">

2. 动态服务

移动和桌面网站不同URL的存在可能会给用户造成一些混淆。另一方面，仅从屏幕宽度来判断用户设备是否是移动设备并不是一个可靠的方法。

因此你或许可以考虑动态服务，它可以用相同的URL服务于移动和桌面网站，只需根据用户设备提供不同的HTML。

这种方法有点复杂，因为你需要有能力检测用户所使用设备的类型，如User-Agent（浏览器向服务器发送的数据头）。你可以在PHP中实现它（variable $_SERVER['HTTP_USER_AGENT']），然后你需要查询数据库来确定设备尺寸，以此来计算设备是否是一个小屏幕。

当你通过相同的URL为不同的设备提供不同的HTML时，你还需要发送HTTP Vary响应，让谷歌机器人知道你依赖用户设备的网站，其工作是不同的，你可以使用下面的方法实现：

<?php <br>  Header('Vary: User-Agent');<br>?>

3. 响应Web页面

响应Web页面是指页面在Web页面尺寸中适应性的调整变化。这意味着，如果Web页面改变其尺寸，使用相同HTML代码的页面布局将在某种程度下适应本身。

在实践中，不仅不同尺寸屏幕上出现的页面纬度不同，而且这些页面也需要适应设备方向的变化。比如说，当用户旋转设备的时候，如果开启了重力感应，其页面也会随之改变。因为屏幕的宽度和高度发生了改变。

这种方法被称为响应，因为它使用相同的HMTL动态的适应屏幕的变化，所以它非常的灵活。这种响应通常是使用CSS media查询来实现，这里有个示例：

.c640 {
	 display: block;
}

@media (max-width: 640px) {

.c640 {
 display: none;
}

}

4. 移动应用

这种方法可以说是一种互补的解决方案，它包含在可以安装在用户设备上的移动应用中，有利用本地设备的能力。而且有些原生功能，用户无法通过访问你的网站来获得，例如向他们的设备发送一些推送通知等。

十个网站响应的技巧

1. 从网站访问次数最多的页面开始

如果你使用的是类似Wordpress这样的常见内容管理系统，你的工作将简单很多，因为你只需要通过一个响应站点更换主题即可。

如果你有一个基于定制开发的网站，比如说是PHP类的情况下，你将需要为适应移动用户做一些定制开发。

如果你有一个拥有上千页面的大网站，还要适应PHP类。你的工作将是巨大的，可能需要数月时间才能完成。因此你需要为这些影响更多用户的页面制定一个标准。

在PHP类网站的情况下，很容易确定影响更多用户的页面是发布于网站上的包，因为它们获得更多的访问量。除此之外，其他被访问最多的网页类型就不是很明确了。

因此你需要考虑站点谷歌分析报告，如果你担心谷歌启动算法更新，处罚非移动友好站点，那么最好看一下网站管理员工具报告，特别是Search Queries和Top Pages。

你可以使用PHP网站管理员工具API类来提取你所需要的页面报告。

2. 使用浏览器开发者工具在小屏幕上预览你的页面

一旦你找到了首要处理的页面，你需要掌控目前可能出现的问题，防止它们呈现在移动设备的屏幕上。

现在的浏览器（如Chrome）会提供工具，可以上你在不同的屏幕尺寸上预览页面。

3. 使视窗适应屏幕尺寸

在这一点中，你首先要做的事是定义一个可以根据屏幕尺寸调整的视窗。（视窗是指一个页面的可见部分），如果一个页面太大，不适应当前的屏幕分辨率，这时可能需要滚动条。

定义视窗可以通过窗口宽度匹配设备宽度来实现，可以通过HTML标记指定的视窗参数。下面的这个例子里，我们定义窗口宽度匹配设备宽度，初始缩放范围从1开始。这意味着移动浏览器将调整页面宽度缩放比例来适应设备宽度。

<meta name="viewport" content="width=device-width, initial-scale=1">

4. 从页眉页脚开始

当你通过窗口宽度匹配设备宽度定义视窗后，你可能会注意到针对桌面的页面不适应小型移动设备屏幕，会出现溢出问题。这是你需要构建HTML响应。通常情况下，所有的网站都有带有页面和页脚HTML的页面。你可以从这里开始，因为你改变这些页面和页脚将影响所有的页面。

5. 使用菜单按钮收缩导航栏

PHP类网站下，可以使用两个水平菜单：一个常见的导航，另一个用于记录用户操作。

横向菜单可以利用可用的水平空间的优势，所以基本上所有的响应页面，其导航菜单都会有两个版本：一个是宽屏幕时，整个菜单选项可以水平显示，另一个则是菜单搜索按键加一个搜索栏。

网站使用media查询来显示单一类型的导航（或另一个），下面代码演示的是HTML和CSS实现该功能的简化版本：

<div class="c1025">Desktop menu here</div>
<div class="u1025">Mobile menu here</div>

@media (max-width: 1024px) {
.c1025 {
 display: none;
}
}

@media (min-width: 1025px) {
.u1025 {
 display: none;
}
}

用PHP类构建的菜单按钮使用了一个很好的技巧来避免对JavaScript的需求。它使用一个隐藏的表单复选框来控制下拉菜单的可见性。

下面是使用HTML和CSS渲染这类菜单的简化版本：

<div id="navigation-menu">
 <input type="checkbox" id="navigation-button">
 <div class="menu-items">
  <div><a href="/browse/"> All class groups </a></div>
  <div><a href="/browse/latest/latest.html"> Latest entries </a></div>
  <div><a href="/browse/top/top.html"> Top 10 charts </a></div>
  <div><a href="/blog/"> Blog </a></div>
  <div><a href="/discuss/"> Forums </a></div>
  <div><a href="/faq/"> Help FAQ </a></div>
 </div>
 <label for="navigation-button" id="navigation-label">
  <span class="drop-icon">Icon Image here</span>
 </label>
</div>

.menu-items {
 position: absolute;
 z-index: 1001;
 background-color: #103754;
 border-color: #cccccc;
 border-style: solid;
 border-width: 1px;
 padding: 4px;
 top: 32px;
 line-height: 36px;
}

.menu-items a {
 color: #C3F0FF;
 font-weight: bold;
 text-decoration: none;
}

#navigation-menu {
 display: inline-block;
 padding: 6px 10px 0px 10px;
}

#navigation-menu .menu-items {
 display: none;
}

#navigation-button:checked + .menu-items {
  display: inline-block;
}

#navigation-menu input[type="checkbox"], 
#navigation-menu ul span.drop-icon {
 display: none;
}

6. 牺牲不重要页面元素

完成页眉页脚，你还要继续你的步伐，穿梭于网站每个类型页面中，按照页面访问优先级（参照前文）。

使用浏览器开发工具在小屏幕上预览页面，减少视窗分离器宽度，直到页面元素溢出视窗。

这时你需要找出哪些不重要的页面元素，你可以使用CSS样式通过media查询牺牲和隐藏它们。

下面演示的是media查询定义逐渐减少点，用于隐藏不同页面元素：

@media (max-width: 1024px) {
.c1025 {
 display: none;
}
@media (min-width: 1025px) {
.u1025 {
 display: none;
}
}
@media (max-width: 499px) {
.c499 {
 display: none;
}
}
@media (max-width: 799px) {
.c799 {
 display: none;
}
}
@media (max-width: 640px) {
.c640 {
 display: none;
}
}
@media (max-width: 360px) {
.c360 {
 display: none;
}
}

7. 使用Google Page Speed Insights来解决悬而未决的问题

谷歌验证一个网站是否移动友好的标准有什么？在视窗上显示恰好的可见内容只是其中的一个标准，还有其他一些不太好评估的，比如接触点的距离（如链接和按钮）。

幸运的是，谷歌提供了一个工具来帮助我们发现需要修复的问题，这只是Google Page Speed Insights工具的一部分。

你只需要输入一个你制作的页面URL，它会向你展示一个等级（0%-100%），让你知道你的页面在手机上的可用性等级，它还会显示该页面目前所存在的问题。

8. 图像适应页面宽度限制

你可能会遇到这样一个问题，需要适应小屏幕的页面存在很多的图片元素。这时你有两种选择，一是如前面提到的，牺牲图片元素；二是自动的调节图片的宽度和高度，该方法适用于有可用的空间。

第二种方法可以通过将图片的宽度设置为100%（或其他百分比）来实现，然后将图片高度设置为自动，以此来保证原始图片的比例。如下段代码所示例的那样：

@media (max-width: 55em) {
.blog-post-body p img {
 width: 100%;
 height: auto;
}
}

与图像相关的另一个方面是，如果你的菜单和图标使用的是小图像时，当浏览器缩放视窗来匹配设备宽度，那些小图片看起来会很大，如果那些图片分辨率很低的时候，更是会破坏整个页面的质量。而解决这种问题的一个方法是使用高分辨率图片，设置较小值的宽度来匹配设备。

9. 安全“填充”链接和按钮四周

谷歌工具可能会报告的另一个典型问题是，你的链接或按钮太接近对方了，这很容易导致错误操作。你可以利用CSS样式表“填充”这些链接和按钮的空间，下面是一个简单的示例：

.safe-padding {
 padding: 2px;
 line-height: 200%;
}

10.使用谷歌网站管理员工具：移动可用性报告

谷歌在Google Webmaster Tools网站上为我们提供了另一种工具：Mobile Usability（移动可用性）。它可以给你一个进程的概念，以及任何你可能或者你认为没有解决的问题。

这个工具显示不同类型的问题：触摸元素太近、小字体尺寸、宽度固定窗口……。它可以给你提供拥有这些问题的页的总数以及URL。不过工具不会实时报告这些，实际报告大概会延迟一个星期，所以它的报告中或许会存在你已修复的问题。尽管如此，它也是很有用处的，任何页面的问题都会有一个链接，你对此会一目了然。

总结

对Web开发者来说，调整网站以适应移动设备是乏味和无聊的任务，远没有前端工作给人带来的兴奋。然而这是必须的进行的一项任务。

移动适应工作仍在继续，只有部分页面适应了移动设备，所以在未来我们会看到更多的变化。

无论如何，本文是为了分享一些有用的信息给那些正处于网站适应移动设备过程的人们。如果您已经经历过类似的过程，或者您有其他相比较本文所分享的技巧而言更好的方法。您可以留下您的观点，分享您的经验。

英文链接：http://www.phpclasses.org