如何同时支持 AMP-html 和桌面 HTML

Question

据我了解，该放大器仅适用于移动设备。如果我使用的是响应式设计，我的网络服务器会为每台设备的每页提供相同的 HTML 文档。

但是如果我想使用 AMP，网络服务器应该决定是为桌面提供 HTML 还是为 AMP 提供 HTML。

我该怎么做？通过 User-Agent?（我认为它很丑而且不可扩展）我错过了什么？

Answer 1

对于相同的内容，您应该有两个 url。主要文章将是 http://example.com/my-article 和放大器版本： http://example.com/my-article.amp

相同 url 没有用户代理切换。您只需在主要文章中指定您拥有带有 link 标签的 amp 版本的文档：

<link rel="amphtml" href="http://example.com/my-article.amp" >

并且在 amp 版本中使用规范指定主要内容的地址:

<link rel="canonical" href="http://example.com/my-article" >

为了回答您的问题，实际的 "mobile detection" 是在搜索结果页面中完成的，因为 google 将决定向用户显示什么 link。

Answer 2

如果 AMP 格式和 extensions 支持您的网页所需的所有功能，您可以只发布 AMP 版本。为了使其在桌面（或一般的宽屏设备）上看起来不错，请确保使用 max-width CSS 属性:

限制页面的最大宽度

body > div {
    max-width: 85em;
}

例如，请查看 LA Times。

How do I support AMP-html and desktop HTML simultaneously