Changing Browser Screen Sizes

See Also 

A single HTML5 application might be viewed on various devices with different screen sizes. The IDE can help you develop projects that can respond and adapt to different display devices by enabling you to view pages at different screen sizes. When you run the HTML5 application from the IDE you can choose to view the pages in one of the default screen sizes or create a custom screen size.

You can view your application in any browser, but if you want to be able to quickly switch between screen sizes you need to specify one of the following integrated browsers as the target browser.

• Chrome with NetBeans Integration
• Embedded WebKit Browser

When you view the application in one of the integrated browsers you can choose the display size in a menu in the browser.

• You can specify the target browser for the application in the Project Properties window or in the Set Project Configuration dropdown list in the toolbar of the IDE.

Switching Between Screen Sizes

The integrated browsers provide menus that enable you to switch between common screen sizes that are pre-configured in the menu. When you select a new screen size the display area of the browser resizes to the selected size. By changing the screen size you can view how the layout of the application responds to different sizes, for example, as a result of media queries that are specified in the style sheet.

After you launch the application you can select a screen size from the menu in the browser. The location of the menu for selecting the screen size options depends upon the target browser.

• Chrome with NetBeans Integration. Click the NetBeans icon in the URL location bar to open the menu and select a screen size.
• Embedded WebKit Browser. Select a screen size in the Other Options menu or click an icon in the toolbar. The toolbar in the Web Browser window contains the following elements.
  • Display device icons. Click a display device icon to resize the display area to the selected size. You can place your cursor over an icon to display the dimensions of the display device. You can modify which icons are displayed in the toolbar by choosing Customize in the Other Options dropdown list.
  • Other Options menu. Select a window size in the dropdown list to view the page contents in the selected window size. The dropdown list displays all the available window sizes. Choose Customize to open a dialog that enables you to modify, create or remove window sizes.
  • Magnification selector. Type a value in the text field or select a value in the dropdown list to change the magnification of the contents of the page.
  • Inspect icon. Select to enable Inspect mode in the page.
  • When you run an HTML5 application the location of the current page is displayed in the Location bar. Pages are rendered using the WebKit browser engine running on the embedded lightweight server (localhost:8383). You can modify the server details in the Project Properties window.

Creating a Custom Screen Size

You can create custom sizes for windows by selecting Customize in the screen size menu. When you select Customize the browser displays a window that enables you to create a new size and to modify the default screen size options. You can also edit the contents of the menu.

See Also

Running an HTML5 Application

Integrating an HTML5 Project with the Browser

Inspecting HTML5 Code with the Browser

Changing the Default Web Browser