The Viewport

Contact Us or call 1-877-932-8228
The Viewport

The Viewport

Our Jazz Calendar site is getting better and better - our liquid design and flexible-image handling now makes the site look better on smaller viewports. But the scale of the site, when viewed on a mobile device, leaves a bit to be desired.

We'll use the viewport meta tag to control the initial zoom of the page and, more importantly, the width of the viewport in pixels.

For this demo, you will need to publish your code to a Web server to be able to view on a smartphone device or emulator. Please refer to the setup instructions for more information.

Try viewing the file MediaQueries/Demos/viewport.html on an iPhone or other smartphone device. Without the viewport tag, the size of text and other elements, when viewed on a smartphone, is pretty small:

iphone view of Jazz Calendar site, without viewport setting

Open up the file in a code editor to inspect the code. Note the presence of the line

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

in the head of the .html file and notice that it is commented out.

Now remove the HTML comment from that line and view the page again from a smartphone or emulator. With the viewport tag in place, we're now starting to get a version of the page that feels like it's designed for mobile use. Note that the page is scaled nicely to fit the mobile screen:

iphone view of Jazz Calendar site, with viewport setting

The initial-scale=1.0 code sets the initial zoom for the page at 100%. width=device-width forces the page to render at the device's width - effectively scaling the page appropriately for our Android, iPhone, or other device.

The presence of the single line

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

in the head of the .html file accomplishes this. The initial-scale=1.0 code sets the initial zoom for the page at 100%. width=device-width forces the page to render at the device's width - effectively scaling the page appropriately for our Android, iPhone, or other device.

We can control more than just the initial scale of the page with the viewport tag:

Viewport tag options
Option Use Values
width width of viewport 200 - 10000 pixels
height height of viewport 223 - 10000 pixels
minimum-scale smallest zoom 0.0 - 10.0
maximum-scale largest zoom 0.0 - 10.0
user-scalable can user scale the page? yes/no
Next