O'Reilly logo

Responsive Web Design with HTML5 and CSS3 by Ben Frain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Stopping modern mobile browsers from auto-resizing the page

Both iOS and Android browsers are based on WebKit (http://www.webkit.org/). These browsers, and a growing number of others (Opera Mobile, for example), allow the use of a specific meta viewport element to override that default canvas shrinking trick. The <meta> tag is simply added within the <head> tags of the HTML. It can be set to a specific width (which we could specify in pixels, for example) or as a scale, for example 2.0 (twice the actual size). Here's an example of the viewport meta tag set to show the browser at twice (200 percent) the actual size:

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

Let's stick that into our HTML as done in the following code ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required