在不同螢幕大小上測試 Oracle JET 虛擬 DOM App

簡介

響應式版面配置可自行調整，以符合各種裝置的螢幕大小。當您在 Google Chrome Web 瀏覽器中執行 Oracle JavaScript Extension Toolkit (Oracle JET) 虛擬 DOM 應用程式時，您可以使用 Chrome 開發人員工具 (Chrome DevTools) 來測試不同螢幕大小的應用程式回應速度。

目標

在本教學課程中，您將在各種螢幕大小上測試已開發之 Oracle JET 虛擬 DOM 應用程式的響應式設計。

必備條件

用來建立 Oracle JET 虛擬 DOM 應用程式 (包括安裝 Node.js) 的開發環境
Google Chrome Web 瀏覽器已安裝並設為預設 Web 瀏覽器
取用 Oracle JET 開發人員手冊
完成此學習路徑的上一個教學課程：在 Oracle JET Virtual DOM 應用程式中顯示或隱藏內容
已視需要下載已完成的應用程式 jet-virtual-dom-app-responsive-design-final.zip

工作 1：執行虛擬 DOM 應用程式

Oracle JET 虛擬 DOM 應用程式具有回應式版面配置和元件，可以在許多 Web 瀏覽器和裝置上執行。在本教學課程中，我們將使用 Chrome 瀏覽器和 DevTools 以各種畫面大小來檢視應用程式。

在終端機視窗中，變更為 JET-Virtual-DOM-app 目錄，然後執行應用程式。

npx ojet serve

Oracle JET 工具可在瀏覽器中執行您的虛擬 DOM 應用程式。

工作 2：變更畫面大小

您可以在 Chrome 瀏覽器的除錯程式模式下，使用各種畫面大小與裝置來測試應用程式。當您在不同裝置上使用應用程式時，應用程式的元件和內容會根據指定畫面的大小進行調整。例如，「活動容器」內容的文字對齊方式將會變更小螢幕大小，以及「活動項目容器」的清單項目和顏色。

在 Google Chrome 中，按 Ctrl+Shift+I 以顯示 Chrome DevTools。
在 Chrome DevTools 工具列中，按一下以切換至裝置模式。
在裝置模式的螢幕模擬器中，按一下維度下拉式功能表。
從下拉式功能表中，選取像素 7 (螢幕大小較小)，然後在螢幕模擬器中檢視應用程式。

在「活動容器」中，內容會靠右對齊。在「活動項目容器」中，會顯示中小畫面的縮寫項目清單，而且標頭活動詳細資訊會取代標頭活動項目。貨櫃的顏色為淺青色。
從維度下拉式功能表中，選取具有中等螢幕大小的 iPad Air 。

在「活動容器」中，內容會靠左對齊。在「活動項目容器」中，會顯示中小畫面的縮寫項目清單，而且標頭活動詳細資訊會取代標頭活動項目。貨櫃的顏色為淺青色。
從維度下拉式功能表中，選取螢幕大小較大的巢狀 Hub 最大值。

在「活動容器」中，內容會靠左對齊。在「活動項目區」中，會顯示大型與額外大型畫面的清單項目。在「上階容器 2」中，填補會套用在「活動項目容器」的左側與「項目明細容器」的右側。
在 Chrome DevTools 工具列中，按一下以結束裝置模式。
關閉顯示您執行中虛擬 DOM 應用程式的瀏覽器視窗或頁籤。
在終端機視窗中，按 Ctrl+C，如果出現提示，請輸入 y 以結束 Oracle JET 工具批次工作。