您是否花费数小时精心设计您的 Web Story，却发现它在旧设备或最大手机上显示效果不佳？在纵向比例中开发内容并使其在所有设备上看起来都很棒可能很棘手。因此，为了简化测试，Web Story 团队今天发布了一个工具，可以向您展示故事的主要设计断点。只需在任何 Web Story 的 URL 末尾添加 **#development=1** 即可访问 Web Stories 开发工具。此附加标记将创建一个新门户，用于在发布故事之前分析您的故事。您可以在此 示例故事 上进行测试。
Web Stories 开发工具
借助开发工具的支持，您可以根据各种设备和平台检查您的故事，还可以检查工具内部的有效 AMP 文档，并访问精选的资源以开始使用故事。主要功能是故事的预览工具，您可以在其中直观地了解故事在多个移动设备上的显示效果，因此您的设计将在最常见的界面上进行测试。它将帮助您发现故事中的设计不一致，而这些不一致在您选择的工具的编辑视图中是看不到的。
虽然市面上有数千种手机型号，但我们仔细选择了设备，以预览最常见的屏幕尺寸、纵横比和平台。如果您的故事支持横向模式，您甚至可以预览它在常见平板电脑和台式机上的显示效果。
对于使用传统 Web 开发工作流程制作故事的开发人员，我们还在调试选项卡中显示验证错误。请确保在发布故事之前修复所有错误。
Web Stories 中常见的布局问题
Web Stories 在不同手机尺寸上经常遇到以下常见问题
- 关键文本在较小的屏幕上被裁剪
- CTA 或点击目标被裁剪或遮挡
- 形状和图像因纵横比的变化而变形
- 文本中的换行符位置错误
- 背景和前景元素未正确对齐
为所有人提供沉浸式体验
无论您是喜欢阅读 Web Stories、有兴趣自己创建 Web Stories 还是构建创建工具，请与 Web Stories 工作组分享您的想法和建议。您可以在 Github、Slack 上与我们联系，并可以订阅流量较低的 开发者预览电子邮件组。
作者：Ryan Warrender，Google Web Stories 产品经理