Adobe Dreamweaver CC 2014 v.13 - Manual (Page 503)

Preview pages using the Multiscreen Preview panel
To the top
To the top
To the top
Change the Viewport sizes
Add media queries
Navigate links
Multiscreen preview in Dreamweaver provides a preview of the page that you are currently editing as it would appear on devices supporting
different screen resolutions.
To open the Multiscreen Preview panel,select File > Multiscreen preview.
Multiscreen preview supports the following screen types:
Phone (default screen size: 320x300 pixels)
Tablet (default screen size: 768x300 pixels)
Desktop (default screen width: 1126 pixels)
Note: If you know the dimensions of any other devices that you want to target, you can specify different styles for different devices. For example,
you can create a screen dimension of 480x272 pixels for a Sony PSP device.
The phone, tablet, and desktop dimensions used for previewing are set to default sizes. However, you can change the default sizes by clicking the
Viewport Sizes button in the Multiscreen Preview panel.
Note: Do not use the Multiscreen Preview panel as a browser. It is not intended to display dynamic media such as movies and audio clips.
Change the Viewport sizes
1. Select File > Multiscreen Preview to open the Multiscreen Preview panel.
2. In the Multiscreen panel, click Viewport Sizes.
3. Specify viewport sizes and click OK. For example, specify 480 as the width and 272 as the height to target a Sony PSP device.
4. (Optional) Reset settings to their default values by clicking Reset to defaults.
Add media queries
See Creating media queries (CS5.5 and later).
Navigate links
The Multiscreen Preview panel does not sync automatically with Design View or Live View. If you edit in one of these views, click the Refresh
button in the Multiscreen Preview panel.
Note: If you navigate away from the original file in Live View, the Multiscreen Preview panel does not display the file that you navigated to. even if
you click the Refresh button.
Navigate among pages in the Multiscreen Preview panel.
Navigate within the Multiscreen Preview panel to navigate away from the original file. Dreamweaver updates all three panes as you navigate within
the Multiscreen Preview panel. If you switch between different top-level tabs in Dreamweaver, click the Refresh button in the Multiscreen Preview
panel to render the currently selected file.
Legal Notices | Online Privacy Policy
496