I am using twitter bootstrap framework. I want to disable zooming in touch devices. I have already used
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
this. Without bootstrap framework and i can prevent zooming in touch devices, but with framework i'm not. So is there any workarounds to do that.
Thanks in advance.
Write Following code that will disable the mobile zoom disable andy also disable for focus on the any input type
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
If you look at Bootstrap documentation, they have said that in order to disable zooming, you must include the following meta tag between opened and closed head tags:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
As other guys mentioned and also you can find in Bootstrap documentation at http://getbootstrap.com/css/#overview-mobile here is the solution
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Guys thanks for the answers. Actually it was my silly mistake. I had a multiple meta's in the page and it was causing the problem. Below code should work for all.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
When I remove initial and maximum-scale out from the meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no" />
tag, iOS 6 Safari is diplaying the site too large. I have to take the initial and maximum out for it too fit correctly. Is it acceptable to leave the viewport tag like this? I haven't tested on other mobile devices.
I use the following for ensure proper sizing on all mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In some cases, I will adjust the initial-scale down a minor amount to ensure the proper scale:
<meta name="viewport" content="width=device-width, initial-scale=.96"> // Scale as needed
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.
Okay this makes a mobile webpage not be able to zoom:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
Now how do I make it be able to zoom?
Change the value of maximun-scale.
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 });