Test the Oracle JET web app on different screen sizes

Introduction

A responsive layout adjusts itself to fit different screen sizes across a wide range of devices. When you run your Oracle JET web app in the Google Chrome web browser, you can test the responsiveness of the web app with different screen sizes that you select in the Google Chrome Developer Tools (Chrome DevTools).

Objectives

In this tutorial, you will test the responsive design of the developed Oracle JET web app on different screen sizes.

Prerequisites

Task 1: Run the Web App

The Oracle JET web app has a responsive layout and components, and it can run on many different web browsers. For this tutorial, we will use the Chrome browser and DevTools to view the app in various screen sizes.

  1. In the terminal window, change to the JET_Web_Application directory and run the app.

    npx ojet serve

    Oracle JET tooling runs your web app in Google Chrome.

    The look and feel of the final app

    Description of the illustration final-app.png

Task 2: Change the Screen Size

You can test the responsiveness of the web app for different screen sizes and devices in the debugger mode of the Google Chrome browser. When you run the app on different devices, the contents of the web app are displayed for the selected screen size, and the text alignment is based on the screen size.

  1. In Google Chrome, press Ctrl+Shift+I to display the Chrome DevTools window.

    Google Chrome debugger enabled

    Description of the illustration chrome-debmode.png

  2. In the Chrome DevTools toolbar, click Toggle device toolbar button to switch to the device mode.

    Device mode toolbar locator

    Description of the illustration device-mode-lens.png

  3. From the device mode’s screen emulator, select a specific device or screen size to test the app.

    Various viewports are displayed

    Description of the illustration viewport.png

  4. Select Pixel 7.

    In the Activities container, the content is aligned to the end of the screen. In the Activity Items container, the list items for small and medium screens are displayed.

    The app displayed for a small screen size

    Description of the illustration small-screen.png

  5. Select iPad Air.

    In the Activities container, the content is left-aligned. In the Activity Items container, the list items for small and medium screens are displayed. For the Activity Items container, padding is applied.

    The app displayed for a medium screen size

    Description of the illustration medium-screen.png

  6. Select Nest Hub Max.

    In the Activities container, the content is left-aligned. In the Activity Items container, the list items for large and extra-large screens are displayed.

    The app displayed for a large screen size

    Description of the illustration large-screen.png

  7. In the Chrome DevTools toolbar, click Toggle device toolbar button to exit the device mode.

  8. Close the browser window or tab that displays your running web app.

  9. In the terminal window, press Ctrl+C, and if prompted, enter y to exit the Oracle JET tooling batch job.

Next Step

To proceed to the first tutorial in the next learning path in this series, click here.

More Learning Resources

Explore other labs on docs.oracle.com/learn or access more free learning content on the Oracle Learning YouTube channel. Additionally, visit education.oracle.com/learning-explorer to become an Oracle Learning Explorer.

For product documentation, visit Oracle Help Center.