I am building an responsive mobile website and need to disable zooming across all devices. I have used a meta tag which should in theory prevent zooming, and which works on iOS, windows Phone and some Android devices, but on several Android phones zooming is still enabled. Here is the meta-tag I have used:
meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"
I've also tried user-scalable=0. I know this is a known bug with Android but other sites have managed to disable zoom on the same phones that i am testing on e.g. http://m.bbc.co.uk/ so there must be a fix out there for this. Does anyone knows a reliable fix for this? Thanks!
Have you tried adding also maximum-scale=1.0?
Not shure this is the solution, but maybe worth a try.
Set initial-scale=0.
Try this:
<meta name="viewport" content="width=device-width, initial-scale=0">
check this : https://www.w3schools.com/css/css_rwd_viewport.asp
*you should add this => maximum-scale=1
check this: a link
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
Related
My front-end works with bootrstrap3.
Firstable I had responsive issues on mobile device that I fixed by adding the meta below:
<meta name="viewport" content="width=device-width, initial-scale=1">
That works well but I have still a strange issue. Most of times, by landing on a page on mobile device, the zoom is lower than 100%.
Actually, what I note is that when the issue is happening, the whole page is displayed on the viewport, so that the zoom is adapted to the total height and width of the page.
If anyone has a solution to fix this issue that would be great.
Try adding the following to your head-tag:
<meta name="viewport" content="width=device-width, user-scalable=no" />
For Mobile Safari in iOS 4.2.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
We are disabling zoom on a mobile web based application. You can't zoom in Native iOS apps and it's not required in our web application. If your site or app is mobile optimised then your users won't need to zoom. There are always use cases for disabling zoom. It doesn't have to always be one way or the other.
That's right, I want to enable zooming rather than disabling it.
I have created a responsive website and all is looking good. However for some reason you can't pinch-zoom in Chrome on a Nexus 7 (running Android 4.2.2).
This is my meta tag that makes sure it shows the site with the right CSS for the screen size:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Nowhere here do I say the user can't zoom. As I say, the site is responsive so there is no reason for the user to need to zoom, however if a user wants to zoom I don't want to stop them. There is no problem on the iPhone, the user can zoom if they want to. But on Android they can't. I have tried adding user-scalable=yes and user-scalable=1 but this makes no difference.
The only thing that works is removing that meta tag but then the site renders itself as if it's being displayed on a large screen so it is no longer responsive.
Is there anything I can do?
#David Lee's comment on top is correct: It seems more of a Nexus 7 thing than a Chrome problem. Google has had a lot of complaints regarding pinch-to-zoom wrt Nexus 7 and there is speculation that they are trying to work around Apple's pinch to zoom patent.
From what I know just using
<meta name="viewport" content="width=device-width, initial-scale=1">
should work.
I've looked at http://m.skyscanner.com/ as an example and it works on other devices with chrome and other browsers like Dolphin HD. And all that site has is the viewport code from above.
Chrome for Android has a way for us to force zoom - Open up the browser's main settings and tap "Accessibility," then check the option called Force enable zoom and see if this works in Nexus 7(I dont have that device so cant test it)
What version of Android? Android 2.2 doesn't support the viewport meta-tag, if your version is between 2.3.x and 4.x try this:
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes" />
Hope this helps.
Although it is not a complete solution to your problem, but it can zoom a particular region.
Thierry B wrote a plugin that will do this and posted it on github repo
You can demo it here:
Just click on the part you want to zoom
Or for Viewport Zoom please refer to this tutorial
use this hope it will help:
<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" />
The last parameter below: user-scalable = 1:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=1" />
No matter what I try I can't get the viewport tag to work with a fixed width.
This is my current effort:
<meta name="viewport" content="width=640" />
It works fine on the iPhone simulator running iOS5. I'm testing it on Android 4.1.
I've read about including some code in the Java .onCreate(); method, but using PhoneGap Build I don't have access to this.
My app is here: https://build.phonegap.com/apps/188638
Any ideas?
Try below view port
`<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no, target-densitydpi=device-dpi"/`>
I'm building a mobile site and have the following meta tag set in the header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Unfortunately, this isn't working on HTC devices (HTC Hero, etc) with Android 2.1. Any ideas on how I can disable pinch-to-zoom in this browser? Works fine on the iPhone.
I have contacted HTC about this issue and they have informed me that they don't have support for the viewport meta tag at all and there is no other way to disable zoom.
Quite disappointing.
This works on the default android and iPhone browsers. Although sadly it doesn't work for HTC's custom browser (as asked).
<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
Just an idea, maybe not useful (not tested) :
Did you look into javascript support in Android's WebView? I think you might be able to call WebSettings.setBuiltInZoomControls(false); which might do what you need.
I've also played with this a LOT, and found no combination that actually disables the zoom.
You can however set the initial scale of the page, so when the user access it, it is in the correct zoom level.
The default zoom level for android browsers is "medium", but as mentioned, if the user changes this in settings (or pinch zooms), it will not be prevented.
The web-site I'm working on is specially designed for Android. The user will not get benefit from Android build-in zoom buttons. On the contrary they make a mess.
How can I switch them off?
the following code casts magic
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>