AMP适配移动端的媒体查询与页面分发机制技术咨询

嘿，刚好之前在项目里折腾过AMP的适配和多端分发，结合官方文档和实际踩坑经验，给你梳理下这些问题：

AMP本身不会自动帮你切换页面，得靠你自己做路由或分发策略，分两种场景来说：

• 搜索引擎分发：如果你的主站页面（www.example.com/blog）和AMP页面关联了正确的标签——主站里加 <link rel="amphtml" href="你的AMP页面地址">，AMP页面里加 <link rel="canonical" href="主站博客地址">，搜索引擎会自动根据用户设备判断：移动端用户搜索时优先返回AMP版本，桌面端返回主站版本。
• 直接访问站点的跳转：如果用户直接输入主站地址，你得自己做设备检测来跳转。推荐用服务端UA检测（比前端JS更可靠，不会被JS禁用影响），识别到移动端就返回AMP页面，桌面端返回主站。如果想用前端JS快速实现，也可以写个简单的判断：

// 示例：视口宽度小于768时跳转到AMP
if (window.innerWidth < 768) {
  window.location.href = 'https://你的AMP页面地址';
}

至于@media queries，它是用来在同一个页面内做响应式样式适配的，不是用来切换不同页面的，别搞混啦～比如你主站是响应式，用@media来调整移动端的样式，但页面本身还是主站的HTML，不是AMP页面。

首先要明确：谷歌搜索的分发逻辑核心是canonical标签的关联关系。

• 如果你把AMP部署在www.blog.example.com，记得让AMP页面的<link rel="canonical" href="https://www.example.com/blog">指向主站博客，主站博客加<link rel="amphtml" href="https://www.blog.example.com">指向AMP页面。这样谷歌会把它们识别为同一内容的不同版本：
  • 移动端搜索“example blog”：优先展示AMP版本（因为AMP的性能优势符合移动端搜索的体验要求）；
  • 桌面端搜索：会分发主站博客页面，除非你的AMP页面体验完全适配桌面端且谷歌判断它更优，但通常还是返回原页面。
• 要是你把AMP页面的canonical指向自己（也就是www.blog.example.com），那谷歌会把它当成独立站点，搜索结果可能会同时出现主站和AMP两个版本，这不是最佳实践，会分散权重，所以一定要做好canonical关联。

AMP页面有个天然的标识：根<html>标签会带有amp属性（也就是<html amp>，旧版是<html ⚡>，现在推荐用amp）。利用这个属性做CSS选择器是最优方案，不需要额外加自定义类，完全符合AMP规范：

/* 普通HTML页面的通用样式 */
body {
  font-size: 16px;
  line-height: 1.6;
}

/* AMP页面专属样式 */
html[amp] body {
  font-size: 15px;
  /* 其他AMP适配样式 */
}

/* 结合@media queries的AMP移动端样式 */
html[amp] @media (max-width: 768px) {
  .post-content {
    padding: 1rem;
  }
}

另外要注意AMP对CSS的限制：所有CSS必须内联在<style amp-custom>标签里，不能用!important，选择器优先级也有限制，这些规则要遵守，不然AMP页面会验证失败。

内容的提问来源于stack exchange，提问作者cala