Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 795
Coen Ponsen Avatar asked Jul 05 '12 13:07

Coen Ponsen


People also ask

How do I set mobile viewport?

To configure a mobile viewport, all you have to do is add a meta viewport tag to any and all webpages you would like to be mobile-friendly. To do this, simply copy the HTML snippet below and paste it in the header of your site.

What is the name of the HTML meta tag responsible for forcing browsers to prevent zoom out Behaviour?

The viewport <meta> tag prevents the user from scaling This means that the URL in question contains a viewport <meta> tag with the attribute user-scalable set to '0' or 'no', which prevents the user from zooming in or zooming out.

What is the purpose of viewport meta tag?

Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.

Where do I put a viewport meta tag?

Throw the viewport meta tag into your <head> , plus the @viewport rule into your CSS when you're building flexible layouts and you're good to go.


1 Answers

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

like image 110
BrutalDev Avatar answered Sep 30 '22 23:09

BrutalDev