6. 牺牲不重要页面元素 完成页眉页脚，你还要继续你的步伐，穿梭于网站每个类型页面中，按照页面访问优先级（参照前文）。 使用浏览器开发工具在小屏幕上预览页面，减少视窗分离器宽度，直到页面元素溢出视窗。
这时你需要找出哪些不重要的页面元素，你可以使用CSS样式通过media查询牺牲和隐藏它们。 下面演示的是media查询定义逐渐减少点，用于隐藏不同页面元素： 7. 使用Google Page Speed Insights来解决悬而未决的问题 谷歌验证一个网站是否移动友好的标准有什么？在视窗上显示恰好的可见内容只是其中的一个标准，还有其他一些不太好评估的，比如接触点的距离（如链接和按钮）。 幸运的是，谷歌提供了一个工具来帮助我们发现需要修复的问题，这只是Google Page Speed Insights工具的一部分。 你只需要输入一个你制作的页面URL，它会向你展示一个等级（0%-100%），让你知道你的页面在手机上的可用性等级，它还会显示该页面目前所存在的问题。 8. 图像适应页面宽度限制 你可能会遇到这样一个问题，需要适应小屏幕的页面存在很多的图片元素。这时你有两种选择，一是如前面提到的，牺牲图片元素；二是自动的调节图片的宽度和高度，该方法适用于有可用的空间。 第二种方法可以通过将图片的宽度设置为100%（或其他百分比）来实现，然后将图片高度设置为自动，以此来保证原始图片的比例。如下段代码所示例的那样： 与图像相关的另一个方面是，如果你的菜单和图标使用的是小图像时，当浏览器缩放视窗来匹配设备宽度，那些小图片看起来会很大，如果那些图片分辨率很低的时候，更是会破坏整个页面的质量。而解决这种问题的一个方法是使用高分辨率图片，设置较小值的宽度来匹配设备。 9. 安全“填充”链接和按钮四周 谷歌工具可能会报告的另一个典型问题是，你的链接或按钮太接近对方了，这很容易导致错误操作。你可以利用CSS样式表“填充”这些链接和按钮的空间，下面是一个简单的示例： 10.使用谷歌网站管理员工具：移动可用性报告 谷歌在Google Webmaster Tools网站上为我们提供了另一种工具：Mobile Usability（移动可用性）。它可以给你一个进程的概念，以及任何你可能或者你认为没有解决的问题。
这个工具显示不同类型的问题：触摸元素太近、小字体尺寸、宽度固定窗口……。它可以给你提供拥有这些问题的页的总数以及URL。不过工具不会实时报告这些，实际报告大概会延迟一个星期，所以它的报告中或许会存在你已修复的问题。尽管如此，它也是很有用处的，任何页面的问题都会有一个链接，你对此会一目了然。 总结对Web开发者来说，调整网站以适应移动设备是乏味和无聊的任务，远没有前端工作给人带来的兴奋。然而这是必须的进行的一项任务。 移动适应工作仍在继续，只有部分页面适应了移动设备，所以在未来我们会看到更多的变化。 无论如何，本文是为了分享一些有用的信息给那些正处于网站适应移动设备过程的人们。如果您已经经历过类似的过程，或者您有其他相比较本文所分享的技巧而言更好的方法。您可以留下您的观点，分享您的经验。 |
