什么是自适应设计

作者: admin 分类: 手机站设计 发布时间: 2016-06-12 00:27 ė 6 5条评论

适应设计 (RWD) 是一项设置;启用这项设置后,服务器始终会向所有设备发送相同的 HTML 代码,并且系统会使用 CSS 来更改网页在设备上的呈现方式。如果所有的 Googlebot 用户代理都可以抓取网页及其资源(CSS、JavaScript 和图片),那么 Google 的算法应该能够自动检测此设置。

响应式设计

响应式设计

自适应设计将向所有设备提供会针对屏幕尺寸进行调整的相同代码。

要点

  • 使用 meta name="viewport" 标记告知浏览器如何调整内容。
  • 访问我们的“网络基础知识”网站,参阅其他文档。

使用 meta name=”viewport”

要向浏览器表明您的网页会自行调整以适应所有设备,请向文档的标头添加以下元标记:

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

视口元标记可以指示浏览器如何根据设备的宽度来调整网页的尺寸和缩放比例。如果没有视口元标记元素,那么在默认情况下,移动设备浏览器就会根据桌面设备屏幕的宽度(通常约为 980 像素,但会因设备而异)来呈现网页。此外,为了尽可能使内容看起来更美观,移动设备浏览器还会放大字体,并缩放内容的比例以适应相应屏幕的尺寸或仅呈现可在相应屏幕内显示的那部分内容。

对于用户来说,这意味着屏幕中显示的字体大小可能会不一致,并且用户可能需要点按两次或通过张合双指进行缩放才能看到内容以及与内容互动。对于 Google 来说,我们可能不会将这类网页视为适合在移动设备上浏览的网页,因为它需要用户在移动设备上进行这种(或这类)互动。

PC与移动对比

左侧的网页是一个未指定视口元标记的网页,因此,移动设备浏览器会将目标屏幕宽度假定为桌面设备屏幕的宽度,然后据此对该网页进行缩放以适应相应的屏幕,从而导致用户很难看清楚其中显示的内容。而右侧的网页是指定了视口的同一网页,它与设备屏幕宽度完全匹配。因此,移动设备浏览器不会对该网页进行缩放,网页内容清晰易读。

对于自适应图片,请添加 <picture> 元素。

一般来说,如果您的网站可以在最新版的浏览器(如 Google Chrome 或 Apple Mobile Safari)中正常运行,那么该网站就可以使用我们的算法。

 

为什么要使用自适应设计

 

我们推荐使用自适应设计是因为它有许多优势:

  • 可通过单一网址让用户更轻松地分享并链接到您的内容。
  • 有助于 Google 的算法为网页准确分配索引属性,无需表明存在对应的桌面版/移动版网页。
  • 只需在工程方面做出较少的投入即可维护多个包含相同内容的网页。
  • 降低了出现影响移动版网站的常见错误的可能性。
  • 无需重定向即可使用户获得针对设备进行了优化的视图,从而缩短了加载时间。此外,基于用户代理的重定向不仅容易出错,而且会使网站所提供的用户体验大打折扣(有关详情,请参阅检测用户代理时的常见问题一节)。
  • 可在 Googlebot 抓取您的网站时节省资源。对于采用自适应设计的网页,一个 Googlebot 用户代理只需执行 1 次抓取(而无需使用不同的 Googlebot 用户代理抓取多次),即可检索到相应内容的所有版本。提高抓取效率可间接协助 Google 将您网站上的更多内容编入索引并确保所抓取的内容是最新的。

如果您对自适应设计感兴趣,请先阅读网站站长中心内的这篇博文并访问网络基础知识网站。

 

本文出自移动网站研究中心,转载时请注明出处及相应链接。

本文永久链接: http://mobile.moonseo.cn/sheji/60038.html

5条评论

  1. 237190018 2016年6月17日 下午4:46 回复

    年中快乐!

  2. 增达信购 2016年6月29日 下午3:54 回复

    虚心学习!!

  3. 蒂欧娜 2016年6月30日 下午5:03 回复

    我就是随便看看!

  4. 694735858 2016年7月5日 下午3:34 回复

    如果有一天,我潇洒死去,请记得,我来过这里!

  5. diouna 2016年7月12日 上午10:06 回复

    你的博客确实好,三天不来受不了!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Ɣ回顶部