如何禁用AMP Story自动全屏模式？适配9:16全高清屏需求

要实现你想要的无默认UI控件、固定9:16（1080x1920）比例且禁用自动全屏的AMP Story，可以通过以下几个关键步骤配置：

1. 核心标签属性配置 #

在你的<amp-story>根标签中添加两个关键属性，同时指定正确的尺寸比例：

<amp-story 
  standalone
  disable-auto-fullscreen
  ui-mode="bare"
  width="1080"
  height="1920"
  layout="responsive"
>
  <!-- 你的Story页面内容 -->
</amp-story>

属性说明： #

• disable-auto-fullscreen：直接阻止浏览器在特定分辨率下自动触发全屏模式，完全由用户主动控制（若需全屏，用户可自行通过浏览器操作开启）
• ui-mode="bare"：隐藏AMP Story默认的所有UI控件，包括关闭按钮、进度条、分享按钮等，实现纯内容的无干扰展示
• width="1080" height="1920" layout="responsive"：强制保持9:16的固定比例，在任何设备上都会按这个比例缩放展示，适配全高清屏幕需求

2. 视口与基础配置优化 #

确保页面的viewport设置正确，避免缩放或布局偏移：

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

同时，确保你的AMP页面引入了正确的AMP Story脚本：

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

3. 额外样式调整（可选） #

如果需要彻底移除背景或自定义边缘间距，可以添加自定义CSS：

amp-story {
  background: transparent !important;
  /* 若需要消除默认内边距 */
  padding: 0 !important;
}

4. 测试验证 #

在目标分辨率（1080x1920）及其他常见设备分辨率下测试，确认：

• 浏览器不会自动触发全屏
• Story保持严格的9:16比例
• 无任何默认UI控件显示

内容的提问来源于stack exchange，提问作者David Král