在多个设备上预览和检查 Dreamweaver 网页

优质
小牛编辑
126浏览
2023-12-01
将您的设备连接到 Dreamweaver 桌面应用程序以在不同的设备上预览、检查、测试和调试您的网页。

Dreamweaver 现在可让您在多个设备上同时测试即将发布的正式版网页。您可以查看网页如何在各种外形规格下进行回流,还可以在您的页面上测试交互功能。无需安装任何移动应用程序或将设备物理连接到您的桌面,即可实现所有这些功能!只需使用您的设备扫描自动生成的 QR 代码,并在设备上预览网页。

在桌面上触发的实时检查会反映在所有已连接设备上,并帮助您检查各种元素并按需要调整设计。

先决条件

确保您的设备上安装了 QR 代码扫描仪。
请确保您的桌面和移动设备已连接到 Internet 并位于同一网络中。
请确保您已准备好 Adobe ID 凭据。在预览时,您需要利用您桌面上 Dreamweaver 所用的 Adobe ID 登录设备。
如果您是企业客户,请检查您是否具有访问设备预览服务所需的权限。
请确保您设备的浏览器设置中启用了 JavaScript 和 Cookie。

支持的设备

所有 Android 和 iOS 设备

在设备上预览网页

  1. 在您的台式计算机上启动 Dreamweaver,然后打开您要在设备上预览的网页。
  2. 单击文档工具栏中的“实时预览”图标。

    在设备上实时预览

    随即将出现“设备预览”弹出窗口,其中包含 QR 代码和短的 URL。

     

  3. 利用您要在其中预览 Web 文档的移动设备扫描 QR 代码。要连接多个设备,请逐一使用这些设备扫描 QR 代码。
  4. 设备上将出现一个登录屏幕。使用您的 Adobe ID 凭据登录。请确保您使用的 Adobe ID 与用于 Dreamweaver/Creative Cloud 的 Adobe ID 为同一个。

    设备上的登录屏幕
  5. 成功登录后,已连接设备的名称将显示在“设备预览”弹出窗口中。而且,您将会在已连接设备上看到网页预览。

    显示已连接设备的“设备预览”弹出窗口

注意:若要将弹出窗口中的设备名称与实际的设备进行映射,请将鼠标悬停在设备名称上。相应的设备上就会出现一个反馈屏幕。

在设备上检查网页

若要在所有已连接设备上检查网页,请单击 Dreamweaver 工具栏中的“检查”图标。

工具栏上的“检查”选项

若要在特定的设备上检查网页,请单击与“设备预览”弹出窗口中的设备名称相对应的“检查”图标。Dreamweaver 中的视口设置为与相对应设备上的视口相匹配,并可在特定设备和 Dreamweaver 上触发检查。

再次单击 Dreamweaver 中的“检查”图标即可退出“检查”模式。

您在桌面上对网页进行的所有编辑都将在其提交后立即反映在设备上。

有关设备预览的疑难解答

如果您在连接设备或在设备上预览网页时遇到问题,请参阅文章设备预览 - 疑难解答中的相关信息。