Full webpage and disabled zoom viewport meta tag for all mobile browsers

I want my webpage to be full screen and disable zooming on all mobile devices.

With the meta tag:

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

I am able to do this for iPhone/iPad, but on Android devices the website is zoomed in to about 125%.

If I use the tag

<meta name="viewport" content="width=max-device-width, user-scalable=no">

I get the opposite result. So then it works on Android but it doesn't work on iPad/iPhone.

Solution 1:

Unfortunately each browser has it's own implementation of the viewport meta tag. Different combinations will work on different browsers.

Android 2.2: viewport meta tag does not seem to be supported at all.

Android 2.3.x/3.x: By setting user-scalable=no you disable the scaling of the viewport meta tag yourself as well. This is probably why your width option is having no effect. To allow the browser to scale your content, you need to set user-scalable=yes, then to disable zoom you can set the min and max scale to the same value so it cannot shrink or grow. Toy with the initial scale until your site fits snugly.

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />

Android 4.x: Same rule apply as 2.3.x except the min and max scales are not honored anymore and if you use user-scalable=yes the user can always zoom, setting it to 'no' means your own scale is ignored, this is the issue I'm facing now that drew me to this question... You cannot seem to disable zoom and scale at the same time in 4.x.

iOS/Safari (4.x/5.x tested): Scales work as expected, you can disable scaling with user-scalable=0 (keywords yes/no don't work in 4.x). iOS/Safari also has no concept of target-densitydpi so you should leave that out to avoid errors. You don't need min and max since you can switch off zooming in the expected manner. Only use width or you'll run into the iOS orientation bug

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

Chrome: Scales work as expected like they do in iOS, min and max are honored and you can switch off zooming by using user-scalable=no.

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

Conclusion: You can use some fairly simple JS to set the content accordingly after some basic browser/device detection. I know this type of detection is frowned upon but in this case it's almost unavoidable because each vendor has gone and done their own thing! Hope this helps people fighting the viewport, and if anyone has a solution for disabling zooming in Android 4.x WITHOUT the use of the viewport, please let me know.

[EDIT]

Android 4.x Chrome browser (which I think is pre-installed in most countries): You can make sure the user cannot zoom and the page is fullscreen. The downside: you have to make sure the content has a fixed width. I haven't tested this on lower Android versions. To do this see the example:

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

[EDIT 2]

iOS/Safari 7.1: Since v7.1, Apple have introduced a new flag for the viewport meta tag called minimal-ui. To assist with full screen apps, this hides the address bar and bottom toolbar for a full-screen experience (not quite Full Screen API but close and doesn't require user acceptance). It does comes with it's fair share of bugs as well and doesn't work in iPads.

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />

[EDIT 3]

iOS/Safari 8 Beta 4: The viewport meta tag minimal-ui mentioned in EDIT 2 has now been removed by Apple in this release. Source - WebKit Notes

Solution 2:

HTML

<head>
    <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
</head>

jQuery

Option 1:

$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');

Option 2:

var deviceSpecific = {
    iPad: 'width=1165,user-scalable=no'
};
if(navigator.userAgent.match(/iPad/i){
    $('meta[name=viewport]').attr('content',deviceSpecific.iPad);
}

Option two being a bit more of a last resort if you're finding inconsistency.

Full webpage and disabled zoom viewport meta tag for all mobile browsers

Solution 1:

Solution 2:

Related

Recent Posts