HTML and CSS Reference
In-Depth Information
This is the best mechanism for testing Metro apps because it allows you to simulate device
capabilities that are not natively available on your development machine. If you explore the buttons
on the right edge of the simulator window, you will see options for changing the screen resolution,
changing the orientation of the device, and simulating touch interactions and location data.
■
You will recall that I set the width of the grid layout to 120 percent of the available
space when I added styles to the
default.css
file earlier in this chapter. You can see the effect
of this in the figure. The text for the bottom-right container is clipped, and part of the layout isn't
immediately visible. You can slide the view by touch or by using the mouse.
Note
Reloading the Metro Application
One of the nice aspects of using JavaScript to develop Metro apps is that you don't have to stop
and restart the app on the simulator to reflect any changes you make. To demonstrate this, I
have made a couple of simple changes. First, I have changed the text contained in one of the
div
elements in
default.html
, as shown in Listing 1-5.
Listing 1-5.
Making an HTML Change
…
<div id="leftContainer" class="gridLeft">
<h1 class="win-type-xx-large">Left Full Container</h1>
</div>
…
I have also made a change to
default.css
, as shown in Listing 1-6, assigning a different
background color to another element.
Listing 1-6.
Making a CSS Change
…
#topRightContainer {
-ms-grid-column: 2;
-ms-grid-row: 1;
background-color: #808080;
}
…
■
When I show partial listings like these, only the bold area has changed. The rest of the
file remains just as it was in earlier listings. I know some readers prefer that all code listings be
shown complete, but I need to pack a lot of information into a slim topic, and this is an excellent
way of increasing the content density. Don't forget that you can get the complete source code,
without charge, from Apress.com.
Tip
Search WWH ::
Custom Search