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:
Open up the file in a code editor to inspect the code. Note the presence of the line
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:
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
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:
|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|