Creating web applications for mobile devices, Change page orientation for mobile devices, Viewing web pages based on media query – Adobe Dreamweaver CC 2015 User Manual

Page 508

501

Mobile and multiscreen

Last updated 6/3/2015

Under Advanced Settings in the left panel, select Local Info.

In Site-Wide Media Query File on the right panel, click Browse to select the media query CSS file.

Note: Changing the site-wide media queries file does not affect documents linked to a different or previous site-wide
media query file.

Click Save.

Viewing web pages based on media query

Dimensions specified in a media query appear in the options for Multiscreen button/window size. When you select a
dimension from the menu, the following changes are seen:

• The view size changes to reflect the specified dimensions. The document frame size is unaltered.

• The CSS file specified in the media query is used to display the page.

Change page orientation for mobile devices

Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see

this article

In most advanced mobile devices, the orientation of a page changes based on how the device is held. When the user
holds the phone vertically, the portrait view is displayed. When the user flips the device horizontally, the page readjusts
itself to fit the landscape dimensions.

In Dreamweaver, the option to view a page in either Portrait or Landscape orientation is available in both Live View
and Design View. Using these options you can test how your page adapts to these settings. You can then, if necessary,
modify your CSS file such that the page is displayed as intended in both these orientations.

❖

Select View > Window Size > Orientation Landscape, or Orientation Portrait.

Creating web applications for mobile devices

Dreamweaver’s integration with jQuery Mobile helps you quickly design a web application that works on most mobile
devices while adapting itself to the dimensions of the device.

Creating a web application using jQuery Mobile

Open a jQuery Mobile starter page, or create a HTML5 page

Use the jQuery Mobile starter pages in Dreamweaver to create your application. Alternatively, you can start creating
your web application with a new HTML5 page.

The jQuery Mobile starter pages include the HTML, CSS, JavaScript, and image files that help you get started with
designing your application. You can use the CSS and JavaScript files hosted on a CDN, your own server, or files installed
along with Dreamweaver.

Note: To identify the location of the linked files, see the and