1

我正在实施放大器故事。

案例:我们在 Instagram 上有很多故事,我们正在将它们迁移到网站上的 amp 故事中。

我正在使用 amp-story,但 amp-img 和 amp-video 的响应有问题。

我认为“响应式”运行良好,因为如果我在 Playground.amp.dev 上对其进行了很好的测试。但是当您在移动设备(chrome 浏览器或 safari 浏览器)上看到图像或视频时,它并不完美。两种情况下的地址栏切掉图像的顶部,如果是 safari,它也会在底部切掉。在 safari mobile 上 40px 和 chrome mobile 上 80px 不算太多。但对于某些图像来说很重要。

有没有机会在不丢失像素的情况下临时隐藏地址栏或调整图像大小?

另一个测试:我为您的图层使用 template="vertical" 和 layout="responsive" 进行了测试,但它使图像非常小并添加了太多颜色背景。

完整测试示例:https ://www.recalculandoviajes.com/amp/poland-test.html

amp-img 标签示例:

    <amp-story-page id="cover" auto-advance-after="5s">
      <amp-story-grid-layer template="fill">
        <amp-img src="https://www.recalculandoviajes.com/wp-content/uploads/images/Varsovia-Recalculando-04.jpg" width="1080" height="1920" layout="responsive">
        </amp-img>
      </amp-story-grid-layer>
    </amp-story-page>

amp-video 标签示例:

   <amp-story-page id="page6" auto-advance-after="video3">
      <amp-story-grid-layer template="fill">
        <amp-video id="video3" autoplay width="639" height="1136" layout="responsive" poster="https://www.recalculandoviajes.com/wp-content/uploads/images/Varsovia-Recalculando-05p.jpg">
          <source src="https://www.recalculandoviajes.com/wp-content/uploads/images/Varsovia-Recalculando-05.mp4" type="video/mp4" />
        </amp-video>
      </amp-story-grid-layer>
    </amp-story-page>

我希望不要太松散的像素,并在智能手机上看到图像全垂直屏幕。

有没有机会在不丢失像素的情况下临时隐藏地址栏或调整图像大小?

你有什么建议吗?这是一个错误(不考虑浏览器地址栏)?

非常感谢您!

4

0 回答 0