用于移动网页的 AMP 媒体查询

Question

最近，我开始考虑在我的博客中使用 AMP。

我开始通读文档并查看它的一些使用示例，它看起来很棒，任何可以提高性能的东西，对我来说都是朝着正确方向迈出的一步，我想将它包括在我的网站页面。

我的问题 - 如果我在 url 的网站上有一个博客：www.example.com/blog（响应式设计，但在 desktop/laptop 屏幕上看起来最好）并且我想要将 AMP 用于我的移动视图，我在 phone 上使用的浏览器如何（safari、chrome、..）或在我的电脑上（chrome、firefox、..）知道要提供哪个页面吗？

AMP 是否识别您设备的宽度和高度并提供移动页面，是否有特定的视口，如果超过，它会根据那个改变 - 或者您是否必须使用 @media查询（css link 样式表或内联样式）？

使用媒体查询扩展 AMP 问题

假设我在我的网站上添加了一个子域来为我的 AMP 博客提供服务 - 例如(www.blog.example.com/) - 如果我 google 在我的 phone 上 "example blog" 它会找到 mobile/desktop html 视图或者类似地，如果我 google 在我的桌面网络浏览器上也是一样，在 AMP 页面 (www.blog.example.com/) 或我的主要博客页面 (www.example.com/blog) 上 find/serve。

这是如何工作的？是否有使用和区分具有 css 样式（包括 @media 查询）的 AMP 和普通 html 页面的首选方法？

Answer 1

要创建 AMP 页面并链接到常规页面，您可以使用

<link rel="canonical" href="$SOME_URL">

请参考https://www.ampproject.org/docs/guides/discovery。希望对您有所帮助！

Answer 2

AMP 无法识别您设备的宽度和高度，无法提供依赖规范的移动页面 link

如果你只有amp页面？

<link rel="canonical" ref="https://www.example.com/your-amp-content-page.html">

如果您同时拥有 amp 和非 amp 页面？

非 AMP 页面

<link rel="amphtml" href="https://www.example.com/your-amp-content-page.html">

AMP 页面

<link rel="canonical" ref="https://www.example.com/your-non-amp-content-page.html">

更多信息Click Here

用于移动网页的 AMP 媒体查询

Media queries with AMP for mobile webpages

html

css

amp-html