桌面和横向模式支持

简介

amp-story 支持桌面和横向体验。

设置

AMP Stories 使用 AMPHTML 编写，它们使用自己的 AMP 扩展：amp-story。第一步是在标题中导入 amp-story。

<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>

可以使用 CSS 设置 Stories 的样式

<style amp-custom>
  amp-story {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI ", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji ", "Segoe UI Emoji ", "Segoe UI Symbol ";
  }
  amp-story-page * {
    color: white;
    text-align: center;
  }
</style>

桌面和横向支持

如果在 amp-story 元素上指定了 supports-landscape 属性，它将：- 允许在移动设备以横向方向握持时查看故事 - 将桌面体验更改为沉浸式的全出血模式，替换默认的三个纵向面板体验

<amp-story standalone supports-landscape
  title="Stories in AMP - Hello World"
  publisher="AMP Project"
  publisher-logo-src="https://amp.org.cn/favicons/coast-228x228.png"
  poster-portrait-src="https://amp.org.cn/static/samples/img/story_dog2_portrait.jpg"
  poster-square-src="https://amp.org.cn/static/samples/img/story_dog2_square.jpg"
  poster-landscape-src="https://amp.org.cn/static/samples/img/story_dog2_landscape.jpg">

  <amp-story-page id="page-1">
    <amp-story-grid-layer template="fill">
      <amp-img src="https://amp.org.cn/static/samples/img/tree-1920x1277.jpg"
      width="1920"
      height="1277" layout="responsive"
      alt="..."></amp-img>
    </amp-story-grid-layer>
  </amp-story-page>
  <amp-story-page id="page-2">
    <amp-story-grid-layer template="fill">
      <amp-img src="https://amp.org.cn/static/samples/img/forest-1920x1280.jpg"
      width="1920"
      height="1280" layout="responsive"
      alt="..."></amp-img>
    </amp-story-grid-layer>
  </amp-story-page>
  <amp-story-bookend src="https://amp.org.cn/static/samples/json/bookend.json" layout="nodisplay">
  </amp-story-bookend>
</amp-story>

需要进一步解释？

如果此页面上的解释未能涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的具体用例。

前往 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例