Question

I am working on a web app which has a width of 640px.

In the document head I set

  <meta name="viewport" content = "width=640, user-scalable=no" />

so the content is nicely displayed and stretched horizontally.
This works perfectly on iOS but in Android the browser opens the website zoomed in so the user has to double click to zoom out and the entire page.

When I change the viewport setting to leave out the user-scalable tag like this:

<meta name="viewport" content="width=640" />

the Android browser adjusts nicely to the 640px – so it works.
The problem however now is, that users can zoom in and out on Android and iOS since the user-scalable tag is not set.

How can I forbid the scaling and at the same time set the viewport width to 640px on Android?

Answer 1

Trying rendering the viewport meta tag like so:

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

Setting scale settings will set user restrictions on how far they can zoom, and so if you set the initial and maximum to the same amount, this should fix the problem.

UPDATE: I was able to fix my bug for android devices all together by setting the below:

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

I also noticed that some content, such as p tags were not flowing across the screen, so the hack for that would be to add the background-image property with empty string to any content that is stuck and is not going across the layout view. Hope this helps this time for you.