华为云首页用户手册

华为云Astro轻应用-适配多终端样例:结果验证

华为云Astro轻应用-适配多终端样例:结果验证

时间：2025-01-26 10:39:17

华为云Astro轻应用

结果验证

单击，进入预览页面，查看commodityListWidget组件效果。

针对手机端视图，AstroZero在预览中提供手机端模拟视图，电脑端和手机端预览效果如图6所示。在电脑端视图中，商品列表单行商品数会跟随浏览器窗口的大小变化。在手机端视图中，商品列表单行商品数为1，始终为单列排布。
图6 商品列表组件电脑端和手机端预览效果

如果您在高级页面中拖入commodityListWidget组件后，再次上传更新了commodityListWidget组件，需要到应用的“页面设置”中进行版本更新操作新版本才可生效。如何更新组件，请参见管理高级组件版本。
使用谷歌浏览器开发者工具（F12），查看多个不同尺寸的终端中此页面的呈现效果。
按下“F12”，单击开发者工具中的，可以切换设备（手机、iPad等），查看组件响应式效果。多个终端（响应式模式、iPhone 6/7/8和iPad横屏）视图效果如图7所示，呈现出多终端适配的响应式效果。
- 在分辨率为1797x425的电脑端中，商品列表单行商品数为5。
- 在iPhone 6/7/8中，商品列表单行商品数为1。
- 在iPad（横屏模式）中，商品列表单行商品数为2。
  图7 多个终端视图效果

上一篇：华为云Astro轻应用-如何定制已有脚本:使用说明

下一篇：华为云Astro轻应用-如何定制已有脚本:使用说明

新客秒杀 2核2G 3M L实例

68元/年

普惠上云领千元上云礼券

立即前往

企业专享 X实例 4核8G 5M

888元/年

热门域名 1元随心购

1元/年起

华为云Astro轻应用-适配多终端样例:结果验证

意见反馈

0/200

提交成功！非常感谢您的反馈，我们会继续努力做到更好反馈提交失败！请稍后重试！

推荐文章

解决方案
相关专题