MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

}
height: 768px;
width: 1024px;
If you create a project with this template in Blend, add a border style to the fixedlayout rule (like
border: 2px solid Red;), and fiddle with the view states and the display settings on the Device tab. Then
you can see how the ViewBox provides all the scaling for free. To show this more obviously, the
FixedLayout example for this chapter changes the child element of the ViewBox to a canvas on which it
draws a 4x3 grid (to match the aspect ratio of 1024x768) of 256px squares containing circles. As shown
in Figure 6-6 (after the sidebar), the squares and circles don’t turn into rectangles and ovals as we move
between view states and display sizes, and letterboxing is handled automatically (applying a
background-color style to the win-viewbox class).
Sidebar: Raster Graphics and Fixed Layouts
If you use raster graphics within a ViewBox, size them according to the maximum 2560x1440
resolution so that they’ll look good on the largest screens and they’ll still scale down to smaller
ones (rather than being stretched up). Alternately, you can use load different graphics (through
different img.src URIs) that are better suited for the most common screen size.
Note that resolution scaling will still be applicable. If you’re running on a high-density 10.6”
2560x1440 display (180% scale), the app and thus the ViewBox will still see smaller screen
dimensions. But if you’re supplying a graphic for the native device resolution, it will look sharp
when rendered on the screen.
FIGURE 6-6 Fixed layout scaling with the WinJS.UI.ViewBox controls, showing letterboxing on a full-screen
1366x768 display (left) and in snapped view (right).
Adaptive Layouts
Adaptive layouts are those in which an app shows more content when more screen space is available.
256