23.01.2018 Views

MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

(unlike having to configure a display driver). Second, a device may be connected to an external display,<br />

meaning that apps need to adjust themselves to different resolutions on the fly and possibly also<br />

different pixel densities. Third, users have the ability in landscape mode to “snap” apps to the left or<br />

right side of the screen, where the snapped app is shown in a 320px wide area and another in the<br />

“filled” area that occupies the remainder of the display. This is accomplished using touch or mouse<br />

gestures, or using the Windows+. (period) and Windows+> (shift+period) keystrokes. (Snapped view<br />

requires a display that’s at least 1366x768; otherwise it’s disabled.)<br />

You definitely want to test your app with all of these variances: view states, display sizes, and pixel<br />

densities. View states can be tested directly on any given machine, but for the latter two, the Visual<br />

Studio simulator and the Device tab of Blend let you simulate different conditions. Our question now is<br />

how an app handles them.<br />

View States<br />

We already got an introduction to the four view states in Chapter 1, “The Life Story of a Windows Store<br />

app” (see Figure 1-6). Let’s now add the next level of precision as described in the following table, which<br />

includes an image of the space occupied by the app, a description of the view state, and the identifiers<br />

for that state as found in both WinRT (in the Windows.UI.ViewManagement.-ApplicationViewState<br />

enumeration) and the -ms-view-state media feature for <strong>CSS</strong> media queries:<br />

Space Occupied by the App (Blue)<br />

Details<br />

App is in landscape mode occupying the entire screen.<br />

WinRT: fullScreenLandscape<br />

-ms-view-state: fullscreen-landscape<br />

App is occupying either left or right side of a landscape screen, in an<br />

area that is always 320 pixels wide. This means you do not need to<br />

design for all possible sizes between snapped, filled (see below), and<br />

full-screen states.<br />

WinRT: snapped<br />

-ms-view-state: snapped<br />

242

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!