Defining a Viewport

You can take advantage of the @-ms-viewport rule to scale content to fit different device resolutions—devices with different widths and heights—automatically.

The @-ms-viewport rule enables you to define a viewport. A viewport determines the width and height of the available screen real estate used to display content independent of the actual screen size.

For example, the following page displays some text and a picture of a Tesla:

Click here to view code image

<!DOCTYPE html><html>    <head>        <title>viewport</title>    </head>    <body>        <h1>A fast, red Tesla</h1>        <img src="../images/tesla.jpg" />    </body></html>

When the page is displayed full screen (see Figure 11.8) then everything looks fine. When ...

Get Windows® 8.1 Apps with HTML5 and JavaScript Unleashed now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial