Automatically zoom out when displaying page in mobile browser?

Question

I'm working on a simple GitPages applet (HTML/JavaScript/JQuery) in a single webpage (Merlot template). It all works pretty well, except that when the page is displayed on the Chrome mobile browser in portrait mode (Android or iPhone) it comes up in zoomed mode. When I pinch zoom it out it fits well, but I have to do that pinch each time.

The example page is here: https://securityessentials.github.io/ThreeRandomWords/ThreeRandomWords.html .

How might I make it do that zoom out automatically?

• Charles

Answer 1

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

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

This meta tag should set initial scale

Answer 2

Aha, Thanks to @rmbdeivis 's comments: here's a solution:

In the head section (which in Git Pages means _includes/head_custom.html) I added the following to change the viewport directive. It doesn't work if this is in the body section - perhaps the browser sets the viewport when it starts parsing the body.

<script>
    // Fix template to make zooming work correctly in Chrome on mobile.
    $('meta[name="viewport"').attr("content", "width=device-width, initial-scale=0.5, maximum-scale=5.0, minimum-scale=0.5"); 
</script>