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 ...