在不同螢幕大小上測試 Oracle JET Web 應用程式

簡介

回應式版面配置會調整自己，以符合各種裝置的不同螢幕大小。當您在 Google Chrome Web 瀏覽器中執行 Oracle JET Web 應用程式時，可以使用您在 Google Chrome Developer Tools (Chrome DevTools) 中選取的不同螢幕大小來測試 Web App 的回應速度。

目標

在本教學課程中，您將在不同的螢幕大小上測試已開發 Oracle JET Web App 的響應式設計。

必要條件

• 設定使用 JavaScript 程式實際執行、Node.js 及已安裝最新 Oracle JET 命令行介面建立 Oracle JET App 的開發環境
• 存取 Oracle JET Developer Cookbook
• 在此學習路徑中完成上一個教學課程，讓您建立 JET_Web_Application 資料夾

任務 1：執行 Web 應用程式

Oracle JET Web App 具有回應式版面配置和元件，可在許多不同的 Web 瀏覽器上執行。在此自學課程中，我們將使用 Chrome 瀏覽器和 DevTools 以各種螢幕大小來檢視應用程式。

1. 在終端機視窗中，變更為 JET_Web_Application 目錄，然後執行應用程式。

   $ ojet serve
   

   Oracle JET 工具會在 Google Chrome 中執行您的 Web App。

   

   final-app.png 圖解的描述

工作 2：變更螢幕大小

您可以在 Google Chrome 瀏覽器的除錯程式模式中，測試不同螢幕大小與裝置的 Web 應用程式回應速度。當您在不同的裝置上執行 App 時，Web 應用程式的內容會顯示為選取的螢幕大小，而文字對齊是根據螢幕大小。

1. 在 Google Chrome 中，按 Ctrl+Shift+I 以顯示 Chrome DevTools 視窗。

   

   chrome-debmode.png 圖解描述

2. 在 Chrome DevTools 工具列中，按一下 以切換至裝置模式。

   

   device-mode-lens.png 圖解描述

3. 從裝置模式的螢幕模擬器中，選取要測試 App 的特定裝置或螢幕大小。

   

   viewport.png 圖解描述

4. 選取像素 5。

   在「活動」容器中，內容會對齊畫面結尾。在「活動項目」容器中，會顯示中小螢幕的清單項目。

   

   小螢幕 .png 圖的描述

5. 選取 iPad Air。

   在「活動」容器中，內容會靠左對齊。在「活動項目」容器中，會顯示中小螢幕的清單項目。對於「活動項目」容器，會套用填補。

   

   Medium-screen.png 圖的描述

6. 選取巢狀 Hub 上限。

   在「活動」容器中，內容會靠左對齊。在「活動項目」容器中，會顯示大型和額外大型畫面的清單項目。

   

   大螢幕 .png 圖像描述

7. 在 Chrome DevTools 工具列中，按一下 以結束裝置模式。

8. 關閉顯示您執行中 Web App 的瀏覽器視窗或頁籤。

9. 在終端機視窗中，按 Ctrl+C，如果出現提示，請輸入 y 以結束 Oracle JET 工具批次工作。

其他學習資源

探索 docs.oracle.com/learn 上的其他實驗室，或是存取更多免費學習內容至 Oracle Learning YouTube 通道。此外，瀏覽 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請瀏覽 Oracle Help Center。

---

標題與版權資訊

Test the Oracle JET web application on different screen sizes

F53125-01

February 2022

Copyright © 2022, Oracle and/or its affiliates.