桌面和橫向模式支援
簡介
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 設定樣式
<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.dev.org.tw/favicons/coast-228x228.png"
poster-portrait-src="https://amp.dev.org.tw/static/samples/img/story_dog2_portrait.jpg"
poster-square-src="https://amp.dev.org.tw/static/samples/img/story_dog2_square.jpg"
poster-landscape-src="https://amp.dev.org.tw/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.org.tw/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.dev.org.tw/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.dev.org.tw/static/samples/json/bookend.json" layout="nodisplay">
</amp-story-bookend>
</amp-story>
需要更多說明嗎？
如果此頁面上的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的具體使用案例。
前往 Stack Overflow 未說明的特色功能？AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開源社群的持續參與者，同時我們也歡迎您針對您特別關注的問題做出一次性貢獻。
在 GitHub 上編輯範例