Have you ever wondered how your design will look on a smaller screen? Or how much content area is available in IE 7 running on Windows? Screens has the answer.
When you click on the toolbar icon shown above, the Screens window will appear:
The controls are grouped into three tabbed sections:
The area for browser content can be toggled off individually or as a group. When you click on the tab with the Mac icon, all of the content areas for Mac browsers will be turned on and off. Likewise, the Windows tab will toggle all of the PC browsers. This makes it easy to switch platforms.
When you click and highlight one of the browser names, you'll include its content area in the window. Sometimes, selecting one of the browser names will not adjust the display of the content area— this is because the browser's content area is larger than what is already shown in the Screens tool. The displayed content area is always the minimum size available, allowing you to maximize your design to fit within a space common to all the selected browsers.
Note: The content areas for each of the browsers is for default settings. Users can (and do!) adjust their toolbars, start menus, and other UI elements. The content areas should be used as a guideline, not as an exact measurement.
Like the other xScope tools, you can click on the Screens icon again to hide the window. This is a convenient way to "clean up" before you go back into your development environment to make any necessary changes. When you're ready to test again, just click on the Screens icon and away you go!
Click on the home button to return to the index or proceed to the next tool: Loupe.