自适应设计
自适应设计(RWD) 是一项设置；启用这项设置后，服务器始终会向所有设备发送相同的 HTML 代码，并且系统会使用 CSS 来更改网页在设备上的呈现方式。如果所有的 Googlebot 用户代理都可以抓取网页及其资源（CSS、JavaScript 和图片），那么 Google 的算法应该能够自动检测此设置。
自适应设计将向所有设备提供会针对屏幕尺寸进行调整的相同代码。
要点
·使用meta name="viewport"标记告知浏览器如何调整内容。
·访问我们的“网络基础知识”网站，参阅其他文档。
使用meta name="viewport"
要向浏览器表明您的网页会自行调整以适应所有设备，请向文档的标头添加以下元标记：
视口元标记可以指示浏览器如何根据设备的宽度来调整网页的尺寸和缩放比例。如果没有视口元标记元素，那么在默认情况下，移动设备浏览器就会根据桌面设备屏幕的宽度（通常约为980 像素，但会因设备而异）来呈现网页。此外，为了尽可能使内容看起来更美观，移动设备浏览器还会放大字体，并缩放内容的比例以适应相应屏幕的尺寸或仅呈现可在相应屏幕内显示的那部分内容。
对于用户来说，这意味着屏幕中显示的字体大小可能会不一致，并且用户可能需要点按两次或通过张合双指进行缩放才能看到内容以及与内容互动。对于Google 来说，我们可能不会将这类网页视为适合在移动设备上浏览的网页，因为它需要用户在移动设备上进行这种（或这类）互动。
左侧的网页是一个未指定视口元标记的网页，因此，移动设备浏览器会将目标屏幕宽度假定为桌面设备屏幕的宽度，然后据此对该网页进行缩放以适应相应的屏幕，从而导致用户很难看清楚其中显示的内容。而右侧的网页是指定了视口的同一网页，它与设备屏幕宽度完全匹配。因此，移动设备浏览器不会对该网页进行缩放，网页内容清晰易读。
对于自适应图片，请添加
元素。
一般来说，如果您的网站可以在最新版的浏览器（如Google Chrome 或 Apple Mobile Safari）中正常运行，那么该网站就可以使用我们的算法。
为什么要使用自适应设计
我们推荐使用自适应设计是因为它有许多优势：
·可通过单一网址让用户更轻松地分享并链接到您的内容。
·有助于Google 的算法为网页准确分配索引属性，无需表明存在对应的桌面版/移动版网页。
·只需在工程方面做出较少的投入即可维护多个包含相同内容的网页。
·降低了出现影响移动版网站的常见错误的可能性。
·无需重定向即可使用户获得针对设备进行了优化的视图，从而缩短了加载时间。此外，基于用户代理的重定向不仅容易出错，而且会使网站所提供的用户体验大打折扣（有关详情，请参阅检测用户代理时的常见问题一节）。
·可在Googlebot 抓取您的网站时节省资源。对于采用自适应设计的网页，一个 Googlebot 用户代理只需执行 1 次抓取（而无需使用不同的 Googlebot 用户代理抓取多次），即可检索到相应内容的所有版本。提高抓取效率可间接协助 Google 将您网站上的更多内容编入索引并确保所抓取的内容是最新的。
如果您对自适应设计感兴趣，请先阅读网站站长中心内的这篇博文并访问网络基础知识网站。
JavaScript
构建适合移动设备的网站时需要仔细考虑的一点是：如何使用JavaScript 来更改网站在不同设备上的呈现方式和行为。JavaScript 的一般用途包括确定在相应网页中显示哪个分辨率版本的广告或图片。
本部分将介绍JavaScript 的不同使用方法以及它们与 Google 推荐使用的自适应设计之间的关系。
常见配置
适合移动设备的网站有以下三种常见的JavaScript 实现方式：
·适应性JavaScript：采用这种配置时，网站会向所有设备提供相同的HTML、CSS 以及 JavaScript 内容。在设备上执行 JavaScript 时，网站的呈现方式或行为会发生变化。如果网站需要使用JavaScript，那么 Google 推荐您使用此配置。
·联合检测：采用这种实现方式时，相应网站会同时使用JavaScript 和服务器端进行设备功能检测，以便向不同的设备提供不同的内容。
·动态提供的JavaScript：采用这种配置时，相应网页会向所有设备提供相同的HTML，但 JavaScript 是通过网址提供的，且此网址可根据设备的用户代理动态地提供不同的 JavaScript 代码。
下面我们来详细介绍一下每种配置。
适应性JavaScript
在此配置中，网址会向所有设备提供相同的内容（HTML、CSS、JavaScript 以及图片）。仅当在设备上执行 JavaScript 时，网站的呈现方式或行为才会发生改变。这与使用 CSS 媒体查询的自适应设计的原理相似。
例如，网页向所有设备提供相同的HTML（其中包括用以请求提供 JavaScript 的外部网址的元素）。请求 JavaScript 网址的所有设备都将获得相同的代码。执行时，JavaScript 会检测设备并决定更改有关网页的某些内容，例如，添加针对智能手机进行优化的图片或广告代码，而非显示针对桌面设备进行优化的相应内容。
此配置与自适应设计紧密相关，并且我们的算法可以自动检测此设置。此外，此配置不需要使用Vary HTTP 标头，这是因为网页及其资源的网址不会动态提供内容。鉴于上述优势，如果您的网站需要使用 JavaScript，我们推荐您使用此配置。
联合检测
采用联合检测时，服务器会与JavaScript 在客户端上协同合作，以便检测设备的功能并更改提供的内容。
例如，某个网站可根据设备是桌面设备还是智能手机来更改内容的呈现方式。在这种情况下，该网站可以添加用于检测屏幕尺寸的JavaScript（检测到的尺寸随后会发送到服务器，以便服务器更新或更改要发送给设备的代码）。通常，JavaScript 会将检测到的设备功能存储在 Cookie 中，供服务器用来读取来自同一台设备的后续访问。
由于服务器会向不同的用户代理返回不同的HTML，因此，联合检测被视为一种可动态提供内容的配置。“动态提供内容”一节对此进行了详细说明，但简而言之就是：当设备请求获取一个可向不同用户代理提供不同HTML 内容的网址时，相应网站应添加“Vary: User-agent”HTTP 响应标头。
动态提供的JavaScript
使用此配置时，相应网页会向所有设备提供相同的HTML。HTML 中包括元素以添加一个外部 JavaScript 文件，此文件的内容根据发出请求的用户代理的不同而有所差异。也就是说，JavaScript 代码是动态提供的。
在这种情况下，我们建议提供的JavaScript 文件中应包含“Vary: User-agent”HTTP 标头。该标头向互联网缓存和 Googlebot 表明，JavaScript 会因用户代理而异；而且，该标头会指示 Googlebot 使用不同的 Googlebot 用户代理抓取 JavaScript 文件。
- 发表于:
- 原文链接：http://kuaibao.qq.com/s/20180505G10L0P00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
