Search code examples
htmlviewportmeta

How to set the initial zoom to show full content of the website?


I made a small html5 canvas game by setting the width as 1280px. Now in mobile view,i found that initially the browser zooms out to show the whole content, which is good as i want exactly that. I was wondering if there was a way to show the 1280px content in the mobile screen fully without any scroll and also prevent the user from zooming in and out.

I found that meta viewport was used to prevent zoomout but by using this the initial zoom level is 100% so the content appears very big with the scroll.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

Also, is it possible to set the zoom level as in the mobile devices in the browser itself. For example, if i am in a 1024px screen, it would zoom out to show the whole 1280px content.


Solution

  • Try adding minimum-scale=1 and setting user-scalable=no