在现有的响应式网站上实施AMP

Question

我是AMP的新手。我有一个响应迅速的网站，我需要在其主页上实施AMP。是否可以使AMP兼容而不影响桌面视图？还是我需要为AMP重写单独的代码？

Answer 1

您可以使用@media区分移动和桌面视图。

来自Create responsive AMP pages：

  

在自适应设计中，您可以使用CSS @media查询针对各种屏幕尺寸来定制网页的样式，而不必更改页面的内容。在AMP中，您可以继续使用相同的CSS @media查询。另外，为了更好地控制AMP元素，可以在元素上指定media属性。当您需要根据媒体查询显示或隐藏元素时，此功能特别有用。有关使用media属性的示例，请参见Changing the art direction of an image部分。

对于javascript，

<script type="text/javascript">

if (screen.width < 980) { 

    document.write('<script type="text/javascript" src="amp mobile.js"></script>');  
 } else{
     import other js
 }

</script>

Answer 2

除非您将桌面站点“升级”为AMP（删除Javascript并使用AMP组件），否则不会。

您通常会创建一个单独的AMP页面（由于AMP对它有很好的支持，因此很容易响应），并使用以下链接包含该AMP页面：

<link rel=amphtml ....>

有关详细信息，请参见https://www.ampproject.org/docs/fundamentals/discovery。