在不同屏幕大小上测试 Oracle JET Web 应用程序

简介

响应式布局会调整自身，以适合各种设备中的不同屏幕大小。在 Google Chrome Web 浏览器中运行 Oracle JET Web 应用程序时，可以使用您在 Google Chrome Developer Tools (Chrome DevTools) 中选择的不同屏幕大小测试 Web 应用程序的响应速度。

目标

在本教程中，您将测试不同屏幕大小的已开发 Oracle JET Web 应用程序的响应式设计。

先决条件

开发环境已设置为创建 Oracle JET 应用程序，并安装了 JavaScript 运行时、Node.js 和最新的 Oracle JET 命令行界面
访问 Oracle JET 开发人员 CookBook
完成此学习路径中的上一个教程，以便您创建 JET_Web_Application 文件夹

任务 1：运行 Web 应用程序

Oracle JET Web 应用程序具有响应式布局和组件，可以在许多不同的 Web 浏览器上运行。对于本教程，我们将使用 Chrome 浏览器和 DevTools 以各种屏幕大小查看应用程序。

在终端窗口中，转到 JET_Web_Application 目录并运行应用程序。
```
$ ojet serve
```
Oracle JET 工具在 Google Chrome 中运行 Web 应用。

插图 final-app.png 的说明

任务 2：更改屏幕大小

您可以在 Google Chrome 浏览器的调试器模式下测试 Web 应用程序对不同屏幕大小和设备的响应能力。在不同的设备上运行应用程序时，将显示所选屏幕大小的 Web 应用程序内容，文本对齐基于屏幕大小。

在 Google Chrome 中，按 Ctrl+Shift+I 显示 Chrome DevTools 窗口。

插图 chrome-debmode.png 的说明
在 Chrome DevTools 工具栏中，单击以切换到设备模式。

插图 device-mode-lens.png 的说明
在设备模式的屏幕仿真器中，选择特定设备或屏幕大小以测试应用程序。

插图 viewport.png 的说明
选择 Pixel 5。

在“活动”容器中，内容与屏幕末尾对齐。在“活动项”容器中，将显示中小型屏幕的列表项。

插图 Small-screen.png 的说明
选择 iPad Air。

在“活动”容器中，内容左对齐。在“活动项”容器中，将显示中小型屏幕的列表项。对于“活动项目”容器，将应用填充。

插图 medium-screen.png 的说明
选择 Nest Hub Max。

在“活动”容器中，内容左对齐。在“活动项”容器中，将显示大屏幕和大屏幕的列表项。

插图 large-screen.png 的说明
在 Chrome DevTools 工具栏中，单击退出设备模式。
关闭显示正在运行的 Web 应用程序的浏览器窗口或选项卡。
在终端窗口中，按 Ctrl+C，如果出现提示，输入 y 以退出 Oracle JET 工具批处理作业。

在不同屏幕大小上测试 Oracle JET Web 应用程序

简介

目标

先决条件

任务 1：运行 Web 应用程序

任务 2：更改屏幕大小

更多学习资源