AMP Pinterest 大小问题
AMP Pinterest size issue
在所有教程/示例中,必须设置我们嵌入的 pinterest 图片的正确宽度和高度。我们(目前)无法获得这些信息。
我们获得了一些 AMP 布局可能性,但其中 none 似乎可行:
- 固定高度 -> 横向图像问题 -> 剪切
- 固定 -> 削减
- 响应式 -> 无尺寸 -> 不显示
为什么 Pinterest 的行为与 instagram 或 twitter 不同?
当您查看示例页面时:https://ampbyexample.com/components/amp-pinterest/
这里的 PIN 也显示错误。为什么?
总结:
是否可以在没有尺寸的情况下让 Pinterest 工作?
如果没有尺寸是不可能的:我们需要 PHP API 来获得这些尺寸吗?
AMP 的主要目标之一是在加载页面时避免任何内容回流。 AMP 通过静态布局整个页面来实现这一点。这就需要提前计算出所有AMP组件的高度。这就是为什么您需要指定 Pinterest 嵌入的高度并且没有办法绕过它的原因(所有其他嵌入也是如此,例如 twitter、instagram 等)。
在您的情况下,听起来 responsive
布局是最佳选择(它需要 width
和 height
,但为了计算图像纵横比)。但是,由于图像未缩放,amp-pinterest 似乎无法正确支持响应式布局。我建议为 AMP 运行时提交 bug report。
P.S。 https://ampbyexample.com/components/amp-pinterest/ 上的样本现已修复。
在所有教程/示例中,必须设置我们嵌入的 pinterest 图片的正确宽度和高度。我们(目前)无法获得这些信息。
我们获得了一些 AMP 布局可能性,但其中 none 似乎可行:
- 固定高度 -> 横向图像问题 -> 剪切
- 固定 -> 削减
- 响应式 -> 无尺寸 -> 不显示
为什么 Pinterest 的行为与 instagram 或 twitter 不同?
当您查看示例页面时:https://ampbyexample.com/components/amp-pinterest/
这里的 PIN 也显示错误。为什么?
总结:
是否可以在没有尺寸的情况下让 Pinterest 工作?
如果没有尺寸是不可能的:我们需要 PHP API 来获得这些尺寸吗?
AMP 的主要目标之一是在加载页面时避免任何内容回流。 AMP 通过静态布局整个页面来实现这一点。这就需要提前计算出所有AMP组件的高度。这就是为什么您需要指定 Pinterest 嵌入的高度并且没有办法绕过它的原因(所有其他嵌入也是如此,例如 twitter、instagram 等)。
在您的情况下,听起来 responsive
布局是最佳选择(它需要 width
和 height
,但为了计算图像纵横比)。但是,由于图像未缩放,amp-pinterest 似乎无法正确支持响应式布局。我建议为 AMP 运行时提交 bug report。
P.S。 https://ampbyexample.com/components/amp-pinterest/ 上的样本现已修复。