18

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?

Horen
  • 11,184
  • 11
  • 71
  • 113
  • 1
    this is browser's bug. i've tried everything, nothing worked. at last i removed `user-scalable=no` only from this browser. it works fine. – Barlas Apaydin Jul 25 '13 at 09:40

3 Answers3

36

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.

Ben Sewards
  • 2,571
  • 2
  • 25
  • 43
  • apparently when setting the initial-scale to 1.0 it adjusts to 320px, so that the page loads zoomed in (the width of my page is 640px). Setting the initial-scale to 0.5 works as well as 640px though. the user-scalable=no option breaks Android no matter if I use , or ; - so still no solution :( – Horen Oct 09 '12 at 09:37
  • so you've also tried a fixed content width of 640px? I just did this yesterday without user-scalable in the meta tag and a fixed width of 640px for the android device I was testing, and both pinch zoom and double tap zoom were disabled with my settings above. – Ben Sewards Oct 09 '12 at 12:25
  • 1
    I have tried `` and `` both make the Android browser load the page zoomed in initially – Horen Oct 09 '12 at 14:42
  • 1
    cool, that seems to work - so to understand this: user-scalable=no is not needed because initial-scale and maximum-scale is set to the same number? – Horen Oct 09 '12 at 14:57
  • 1
    exactly. we can lock the user visible layout this way :) – Ben Sewards Oct 09 '12 at 15:10
  • 1
    [This](http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) says that you should use commas to seperate multiple properties, not semicolons. – nickgrim Feb 07 '13 at 12:57
  • You are correct, although I have tried both and the results were no different. I might as well update my answer anyhow – Ben Sewards Feb 11 '13 at 03:20
  • I hate that this works, but it does. I was having problems with a fully responsive site zooming in even with width=device-width on iPhone and Android, but this seems to have resolved it. – Lawrence Johnson Feb 10 '14 at 23:30
  • In case people got here and wanted to see an alternative solution if this one wasn't quite working for them, I had a similar problem and found an answer that was more effective for my case: http://stackoverflow.com/questions/21738675/why-wont-my-viewport-tag-properly-use-device-width-no-zoom-on-most-mobile-dev/21803258 – Lawrence Johnson Feb 15 '14 at 20:34
  • @LawrenceJohnson thanks for the reference, it's been a while since I've updated this solution, and frankly, there now has to be a better way for supporting a variety of mobile devices. Be aware with this answer that it may not play well with landscape mode. – Ben Sewards Feb 17 '14 at 17:45
  • It's true. The solution I posted to my own question I think is a little bit better suitable for that. It seems to work better for me anyway. Still, there needs to be better methods for handling then assuming a base 320 width. – Lawrence Johnson Feb 18 '14 at 17:51
7

I wanted mobile to always show a website 640px wide because of a design that would break otherwise. (a design I did not make..) Thereby I wanted to disable zooming for mobile users. What worked for me me is the following:

- UPDATED 2013-10-31

First of all, there is no way you can do this without Javascript. You will have to check the user agent string. Therefore I created a mobile-viewport.js and included the script just before the closing tag:

function writeViewPort() {
    var ua = navigator.userAgent;
    var viewportChanged = false;
    var scale = 0;

    if (ua.indexOf("Android") >= 0 && ua.indexOf("AppleWebKit") >= 0) {
        var webkitVersion = parseFloat(ua.slice(ua.indexOf("AppleWebKit") + 12));
        // targets android browser, not chrome browser (http://jimbergman.net/webkit-version-in-android-version/)
        if (webkitVersion < 535) {
            viewportChanged = true;
            scale = getScaleWithScreenwidth();
            document.write('<meta name="viewport" content="width=640, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + '" />');
        }
    }

    if (ua.indexOf("Firefox") >= 0) {
        viewportChanged = true;
        scale = (getScaleWithScreenwidth() / 2);
        document.write('<meta name="viewport" content="width=640, user-scalable=false, initial-scale=' + scale + '" />');
    }

    if (!viewportChanged) {
        document.write('<meta name="viewport" content="width=640, user-scalable=false" />');
    }

    if (ua.indexOf("IEMobile") >= 0) {
        document.write('<meta name="MobileOptimized" content="640" />');
    }

    document.write('<meta name="HandheldFriendly" content="true"/>');
}

function getScaleWithScreenwidth() {
    var viewportWidth = 640;
    var screenWidth = window.innerWidth;
    return (screenWidth / viewportWidth);
}

writeViewPort();

The script checks if the visitor has an android (not chrome) or firefox browser. The android browser does not support the combination of width=640 and user-scalable=false, and the firefox browser does have a double screen width for some strange reason. If the visitor has a windows phone IE browser MobileOptimized is set.

pkmelee337
  • 561
  • 5
  • 11
  • Oh, thank you for this. I had to tweak it a bit to work for my specific site, but now I get a site that fits the browser exactly, even on old Android devices. – jeffedsell Jan 30 '14 at 17:38
0

I had the same situation, if you want the content to always fit the screen width without allowing the user to zoom in/out, use the following meta tags (this will work no matter what width you give)

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Nitin
  • 1,451
  • 13
  • 17
  • apparently when setting the initial-scale to 1.0 it adjusts to 320px, so that the page loads zoomed in (the width of my page is 640px). Setting the initial-scale to 0.5 works as well as 640px though. the user-scalable=no option breaks Android no matter if I use , or ; - so still no solution :( – Horen Oct 09 '12 at 09:35