I want to disable auto zoom when focusing an HTML input field on Android Firefox (possibly iOS Safari).
I've read many related, ancient threads on SO [1, 2, 3] and on the web, but found neither a working solution nor a definitive answer that this is not possible in 2021. The only test device I have is an Android phone (this may also happen with iOS), on which the issue only comes up with Firefox; Chrome works as intended (by me).
I have tried:
setting font-size: 16px on the input field
setting <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1" />
and out of desperation even <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1, user-scalable=no">
Android 11, Firefox 93.1.0
Is what I want to achieve really not possible?
Codesandbox: https://y370s.csb.app/
[1] Disable Auto Zoom in Input "Text" tag - Safari on iPhone
[2] Disable zoom on input focus in Android webpage
[3] Disable zoom on input focus in Android smartphone
Fixed in 96
This is now fixed for Firefox Mobile 96 and later. There is some indication from the bug thread that it wasn't an issue in versions before 94, but I can't confirm exactly what version introduced this bug.
Set a meta tag with minimum-scale=1 and maximum-scale=1, such as:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1" />
Reference: Bug 1738696
Just setting user-scalable=no in a <meta name="viewport" tag will work in the future, as well as just setting CSS like touch-action: manipulation. Follow Bug 1746126 for updates on that.
For all mobile browsers
To prevent input field zooming across all mobile browsers, I'd suggest also including user-scalable=no, just to cover all your bases. So the final answer is to put this in your <head>.
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=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.
I have a website which uses bootstrap for responsiveness.
I tried to use Android phone to open this website in mobile browser, all UI components work fine, grids get re-located to fit the right size of screen.
I then wrap all the html code and related resources into a cordova project, everything works fine except the responsiveness. So the problem is the responsiveness isn't triggered in this hybrid app so all UI components stay where they are as they are displayed in a computer browser.
Do you have any ideas about this issue?
Thanks in advance.
Update
Here is my viewport
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
I have created Phonegap + standard Twitter Bootstrap app for android. Everything works OK, but when I open app on phone with high DPI like HTC One S (1280x720 display), everything in GUI (including controls - buttons, inputs, ...) is very small and user gets bad UX. What can I do to make it look like on mobiles with standard DPI?
Meta looks like this:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
Ok, got it. I had to remove target-densitydpi=device-dpi which was copied from don't know where.
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" />
I am working on a framework for A mobile site using Jquery Mobile. Has anyone been successful at locking the ability to scale for the android phone? Right now I am using <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />. This works for all phones, but for Android I can scale. Is there anything I can do in Javascript or change the view port settings? Any guidance, demo, or links would be really helpful!
You can use html meta tags to achieve that like
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
see example at http://tab.pagesjaunes.fr