HTML and CSS Reference
In-Depth Information
Whenever the user clicks the button, the total property of the application's state object is updated
and displayed through the user interface. What happens to the state when the application is snapped,
unsnapped, or the orientation changes?
Orientation and view change events do not affect the application's state if the application is in the
foreground—whether full-screen, snapped, or filled. If the application is in the background, it doesn't
receive any of these events.
Adapting the application's content
So far, you haven't really experienced the intricacies of having an application that has to support
multiple resolutions. To bang against the problem, make the following changes to the default.html file:
<div style="width: 500px; background-color: red;">
<h1>My App</h1>
<h2 style="text-align: right" id="currentViewState"></h2>
<hr />
<button id="buttonCounter">Counter</button>
<h3 id="total"></h3>
You just styled the main page in a slightly different manner. Now the entire user interface of the
page (expect header and footer) is wrapped in a square 500 pixels wide and painted red so that it is
more visible. In addition, the message about the current view state is now aligned to the right edge of
the user interface container. The width chosen for the containing box (500 pixels) is not coincidental:
any value significantly larger than 320 would work as well. Keep in mind that 320 pixels is the width of
the snapped area.
The application doesn't experience any particular issues when run in filled, landscape, and portrait
mode. Note, though, that this is more of the exception than the rule. Filled, landscape, and portrait
modes still take the application to run in different resolutions and, more importantly, different aspect
ratios. However, when you snap the SnapMe application to the edge, you see what's in Figure 8-8.
FIGURE 8-8 Some content is cut off in the snapped view.
Search WWH ::

Custom Search