How can I "disable" zoom on a mobile web page? - html
I am creating a mobile web page that is basically a big form with several text inputs.
However (at least on my Android cellphone), every time I click on some input the whole page zooms there, obscuring the rest of the page. Is there some HTML or CSS command to disable this kind of zoom on moble web pages?
This should be everything you need:
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
For those of you late to the party, kgutteridge's answer doesn't work for me and Benny Neugebauer's answer includes target-densitydpi (a feature that is being deprecated).
This however does work for me:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
There are a number of approaches here- and though the position is that typically users should not be restricted when it comes to zooming for accessibility purposes, there may be incidences where is it required:
Render the page at the width of the device, dont scale:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Prevent scaling- and prevent the user from being able to zoom:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Removing all zooming, all scaling
<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" />
Seems like just adding meta tags to index.html doesn't prevent page from zooming. Adding below style will do the magic.
:root {
touch-action: pan-x pan-y;
height: 100%
}
EDIT:
Demo: https://no-mobile-zoom.stackblitz.io
Mobile browsers (most of them) require font-size in inputs to be 16px.
And since there is still no solution for initial issue, here's a pure CSS solution.
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
font-size: 16px;
}
solves the issue. So you don't need to disable zoom and loose accessibility features of you site.
If your base font-size is not 16px or not 16px on mobiles, you can use media queries.
#media screen and (max-width: 767px) {
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
font-size: 16px;
}
}
You can use:
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
...
</head>
But please note that with Android 4.4 the property target-densitydpi is no longer supported. So for Android 4.4 and later the following is suggested as best practice:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
please try adding this meta-tag and style
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<style>
body{
touch-action: manipulation;
}
</style>
Possible Solution for Web Apps: While zooming can not be disabled in iOS Safari anymore,
it will be disabled when opening the site from a home screen shortcut.
Add these meta tags to declare your App as "Web App capable":
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" >
<meta name="apple-mobile-web-app-capable" content="yes" >
However only use this feature if your app is self sustaining, as the forward/backward buttons and URL bar as well as the sharing options are disabled. (You can still swipe left and right though) This approach however enables quite the app like ux. The fullscreen browser only starts when the site is loaded from the homescreen. I also only got it to work after I included an apple-touch-icon-180x180.png in my root folder.
As a bonus, you probably also want to include a variant of this as well:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>
Please Add the Script to Disable pinch, tap, focus Zoom
You can accomplish the task by simply adding the following 'meta' element into your 'head':
<meta name="viewport" content="user-scalable=no">
Adding all the attributes like 'width','initial-scale', 'maximum-width', 'maximum-scale' might not work. Therefore, just add the above element.
<header>
<meta name="viewport" content="user-scalable=no">
</header>
A pure "user-scalable=no" is sufficient and excluding other width and scale parameters should be fine for your case. In my case, I have just simply added the snippet on my . Tested on iOS 16.
Using this post and a few others I managed to sort this out so that is compatible with Android and iPhone/iPad/iPod using the following code. This is for PHP, you can use the same concept for any other language with string searches.
<?php //Device specific headers
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
$webOS = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");
if($iPhone || $iPod || $iPad){
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />';
} else {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0" />';
}
?>
This may help someone: on iOS, my problem was fixed by swapping <button>s for <div>s, along with the other things mentioned.
The solution using a meta-tag did not work for me (tested on Chrome win10 and safari IOS 14.3), and I also believe that the concerns regarding accessibility, as mentioned by Jack and others, should be honored.
My solution is to disable zooming only on elements that are damaged by the default zoom.
I did this by registering event listeners for zoom-gestures and using event.preventDefault() to suppress the browsers default zoom-behavior.
This needs to be done with several events (touch gestures, mouse wheel and keys). The following snippet is an example for the mouse wheel and pinch gestures on touchpads:
noteSheetCanvas.addEventListener("wheel", e => {
// suppress browsers default zoom-behavior:
e.preventDefault();
// execution of my own custom zooming-behavior:
if (e.deltaY > 0) {
this._zoom(1);
} else {
this._zoom(-1);
}
});
How to detect touch gestures is described here: https://stackoverflow.com/a/11183333/1134856
I used this to keep the standard zooming behavior for most parts of my application and to define custom zooming-behavior on a canvas-element.
document.addEventListener('dblclick', (event) => {
event.preventDefault()
}, { passive: false });
Related
viewport can't satisfy mobile screen?
I'm web developer. I developed my mobile website use 'viewport' option in html for responsive mobile website. Then, I assigned meta data like this below:- <meta name="viewport" content="width=320"/> But my web site occurs right margin(below pic is part of my web site menubar) How can delete right margin? .... Thanks for your help! enter image description here ....
Write this and try if it works... <meta name="viewport" content="width=device-width, initial-scale=1">
You can need to change your media query to this and this would difinilty work for your in website. Please vode if i m correct. <meta name="viewport" content="width=device-width, initial-scale=1">
Try this: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> EDIT: By giving static width, you are already loosing the responsiveness. Instead use device-width which would automatically take the device's width. max-scale=1.0 and user-scalable=no wouldn't allow the user to pinch zoom on the mobile. If you want to let the user zoom in on the website, you can remove these two
Disable all page-zooming in IE11 on Windows8-Arm
How can I disable ALL viewport zooming for a webpage accessed via IE11 on WinRT? I'm working on an application that does it's own drawing on a canvas sized to fit the viewport, and provides it's own zoom functionality internally. Having the browser zoom then makes a mess of the canvas. I've been going through existing answers, and none of them seem to work for this plaform: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> or <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> or <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> or <meta name="viewport" content="user-scalable=no" /> or <meta name="viewport" content="width=device-width" /> In the <header> all have no effect. Additionally, I'd like to block double-tap-zooming, but the various jQuery snippets I've seen don't seem to work here either.
Arrrgh, so as soon as I asked the question, I found a solution:
Adding:
html
{
-ms-content-zooming: none; /* Disables zooming */
touch-action: none; /* Disable any special actions on tap/touch */
}
to the CSS for the application page appears to properly block pinch-zoom in IE, and disable any of the special actions triggered by tapping/double-tapping.
use this
var zoomlevel=1;
$("body").dblclick(function(ev) {
zoomlevel = zoomlevel == 1 ? 2 : 1;
$(this).css({
"-moz-transform":"scale("+zoomlevel+")",
"-webkit-transform":"scale("+zoomlevel+")",
"-o-transform":"scale("+zoomlevel+")",
"-ms-transform":"scale("+zoomlevel+")"
});
});
meta name="viewport" doesn't work as expected
I have that meta tag in my website www.ssd-vergleichen.de <meta name="viewport" content="width=device-width; initial-scale=1.0;"/> To prevent the device from initial zooming into the website. When watching the website on my chrome mobile browser on Samsung Galaxy S2, the website is beeing zoomed in about 400%. What did I do wrong? Can anyone help? Thanks in advance Edit: With using <meta name="viewport" content="width=device-width, initial-scale=1.0" /> it works in Android's standard webbrowser, but still not in Chrome. I wonder if it works in IOS? Edit2: No, it also doesn't work with iOS http://iphonetester.com/
Try this : <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />
Have you tried <meta name="viewport" width="device-width"> As I understand it width="device-width" constrains the width of the layout to the device width. Surely setting intial-scale=1 is then telling the browser to zoom 100% (i.e. not scaled)? Update <meta name="viewport" content="width=device-width, initial-scale=1;"/> Is intended to be used to scale responsive sites correctly. Considering your site is fixed to a width of 1100px, setting initial-scale=1 will not result in the whole page being visible. From the W3C Use Meta Viewport Element To Identify Desired Screen Size
Try: <meta name="viewport" content="width=device-width, initial-scale=1.0" /> with no ;
I had the same problem today and I was able to fix it by toying with the target-densitydpi attribute and setting it to high while setting the width to device-width Like so: <meta name="viewport" content="initial-scale=0.8, zoom=10%, width=device-width, target-densitydpi=high-dpi"> This solved my problem.
Try this:
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
In CSS put this:
html, body {
max-width: 100%;
overflow-x: hidden;
}
You should write <meta id="viewport" name="viewport" content="[your_content_params]" /> I tried this and it worked.
How to disable zooming capabilities in responsive design?
How can I disable zoom-in and zoom-out capability in responsive design pages while using iPad, iPhone and/or some other smartphone. Is there any way to control it?
Create a META viewport tag, and set the user-scalable property to 'no', like this: <meta name="viewport" content="user-scalable=no" /> Updated answer:- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
This pretty much discriminates against anyone over 30, suppressing zoom just forces them to use reading glasses. Which may be your intent. One of the workarounds for such users is to use RDP or VNC to view a desktop browser and "pinch" the view of that. Question should maybe read "how to disable" or "how to suppress". You should of course discern your devices using the user agent string.
To Disable Zoom Please Add this Script
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>
How do you disable viewport zooming on Mobile Safari?
I've tried all three of these to no avail: <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” /> each are different values I found recommended by google searching or SO searching, but none of the 'user-scalable=X' values seem to be working I also tried comma delimiting the values instead of semicolon, no luck. Then I tried ONLY having the user-scalable value present, still no luck. UPDATE Got this from Apple's site and it works: <meta name="viewport" content="width=device-width, user-scalable=no" /> it turns out that the problem was the non-standard quotes because I had copied the meta tag from a website that was using them, whoops
Edit: may not work after iOS 10, please see touch-action based solution below. Your code is displaying attribute double quotes as fancy double quotes. If the fancy quotes are present in your actual source code I would guess that is the problem. This works for me on Mobile Safari in iOS 4.2. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
For the people looking for an iOS 10 solution, user-scaleable=no is disabled in Safari for iOS 10. The reason is that Apple is trying to improve accessibility by allowing people to zoom on web pages. From release notes: To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport. So as far as I understand, we are sh** out of luck.
#mattis is correct that iOS 10 Safari won't allow you to disable pinch to zoom with the user-scalable attribute. However, I got it to disable using preventDefault on the 'gesturestart' event. I've only verified this on Safari in iOS 10.0.2.
document.addEventListener('gesturestart', function (e) {
e.preventDefault();
});
Using the CSS touch-action property is the most elegant solution. Tested on iOS 13.5 and iOS 14.
To disable pinch zoom gestures and and double-tap to zoom:
body {
touch-action: pan-x pan-y;
}
If your app also has no need for panning, i.e. scrolling, use this:
body {
touch-action: none;
}
for iphones safari up to iOS 10 "viewport" is not a solution, i don't like this way, but i have used this javascript code and it helped me
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if(event.scale > 1) {
event.preventDefault();
}
}, false);
I got it working in iOS 12 with the following code:
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
window.document.addEventListener('touchmove', e => {
if(e.scale !== 1) {
e.preventDefault();
}
}, {passive: false});
}
With the first if statement I ensure it will only execute in iOS environments (if it executes in Android the scroll behivour will get broken). Also, note the passive option set to false.
I managed to stop this behavior by adding the following to the HTML header. This works on mobile devices, as desktop browsers support zooming when using the mouse wheel. It's not a big deal on desktop browsers but it's important to take this into account.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
and the following rule to the CSS stylesheet
html {
-webkit-text-size-adjust: none;
touch-action: manipulation;
}
Actually Apple disabled user-scalable=no on latest iOS versions.
I tried as guideline and this way can work:
body {
touch-action: pan-x pan-y;
}
user-scalable=0 This no longer works on iOS 10. Apple removed the feature. There is no way yo can disable zoom website on iOS now, unless you make gross platform app.
Try adding the following to your head-tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
additionally
<meta name="HandheldFriendly" content="true">
Finally, either as a style-attribute or in your css file, add the following text for webkit-based Browsers:
html {
-webkit-text-size-adjust: none
}
This works fine in IOS 10.3.2
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if (event.scale !== 1) {
event.preventDefault();
}
}, false);
thank you #arthur and #aleclarson
In Safari 9.0 and up you can use shrink-to-fit in viewport meta tag as shown below <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
sometimes those other directives in the content tag can mess up Apple's best guess/heuristic at how to layout your page, all you need to disable pinch zoom is. <meta name="viewport" content="user-scalable=no" />
As mentioned this solution basically works as of late 2020:
document.addEventListener(
'gesturestart', (e) => e.preventDefault()
);
But the downside is that while you are scrolling you'd still be able to pinch and then it gets stuck.
The solution is to disable scrolling.
body {
overflow: hidden;
}
But, what if you still wanted the page to be scrolled?
You can still do it with another <div> set as overflow:auto:
<body>
<div id='app'></div>
</div>
and then
body {
overflow: hidden;
}
#app {
-webkit-overflow-scrolling: touch;
height: 100vh;
height: -webkit-fill-available;
overflow: auto;
}
I tried all above things but this worked for me on IOS devices: <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">
As of today (Oct. 2022) with iOS 14.8, the ONLY way I could completely prevent the double tap zoom was this:
document.addEventListener("click", (e) =>
{
e.preventDefault();
})
Even this:
* {
touch-action: none !important;
}
(which is obviously not realistic, but just for demonstration purposes) wasn't enough in every case. It turned out that any for element on which I had handled click, double tapping on it would cause a nearly irreversible zoom-in, completely ignoring the touch-action setting. But if I called preventDefault() in the click handler, it would not zoom. So, doing this at the document level so far seems to be enough, so that I don't have to do it every time I handle click.
I have no idea what side effects this might have, but I'm sure folks will chime in if they think of any.
In order to comply with WAI WCAG 2.0 AA accessibility requirements you must never disable pinch zoom. (WCAG 2.0: SC 1.4.4 Resize text Level AA). You can read more about it here: Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile, 2.2 Zoom/Magnification
I foolishly had a wrapper div which had a width measured in pixels. The other browsers seemed to be intelligent enough to deal with this. Once I had converted the width to a percentage value, it worked fine on Safari mobile as well. Very annoying.
.page{width: 960px;}
to
.page{width:93.75%}
<div id="divPage" class="page">
</div>
This one should be working on iphone etc. <meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no">