Desktop and Landscape Mode Support
Introduction
amp-story supports a desktop and landscape experience.
Setup
AMP Stories are written using AMPHTML and they use their own AMP extension: amp-story. The first step is to import the amp-story in the header.
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
Stories can be styled using CSS:
<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>
Desktop and landscape support
If supports-landscape attribute is specified on the amp-story element, it will:
- allow the story to be seen when a mobile device is held in a landscape orientation
- change the desktop experience to an immersive full bleed mode, replacing the default three portrait panels experience
<amp-story standalone supports-landscape
title="Stories in AMP - Hello World"
publisher="AMP Project"
publisher-logo-src="https://amp.dev/favicons/coast-228x228.png"
poster-portrait-src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg"
poster-square-src="https://amp.dev/static/samples/img/story_dog2_square.jpg"
poster-landscape-src="https://amp.dev/static/samples/img/story_dog2_landscape.jpg">
<amp-story-page id="page-1">
<amp-story-grid-layer template="fill">
<amp-img src="https://amp.dev/static/samples/img/tree-1920x1277.jpg"
width="1920"
height="1277" layout="responsive"></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.dev/static/samples/img/forest-1920x1280.jpg"
width="1920"
height="1280" layout="responsive"></amp-img>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-bookend src="https://amp.dev/static/samples/json/bookend.json" layout="nodisplay">
</amp-story-bookend>
</amp-story>
需要进一步说明？
如果此页面上的说明未能涵盖您的所有问题，欢迎与其他 AMP 用户取得联系，讨论您的具体用例。
前往 Stack Overflow 一项无法解释的功能？AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。
编辑 GitHub 上的示例