Appearance
How to Disable Zoom on a Mobile Web Page With HTML and CSS
The zooming option is not always helpful. One of the most common inconveniences both developers and users face is the zoom on mobile browsers, especially when you are developing a game. However, disabling the zooming option is becoming a common mistake for many situations and we don't recommend it for most of the web pages as zooming can help accessibility for many users. Imagine someone with vision-related disabilities trying to read a text on your website. By the way, if you're sure about what you're doing and you want the zooming option to be blocked anyway, here we include some ways to do so.
To disable the zooming option, you can use the Surefox browser, but still, the page will zoom in and out by double-tapping on the screen, so you’ve better try the methods suggested by HTML and CSS.
How to disable zooming with HTML
The most common way of disabling the zoom is using the HTML <meta> tag. The user-scalable attribute allows the device to zoom in and out. You should define the "no" value for this attribute in order to disable the zooming option. It must look like this:
How to use meta tag with user-scalable attribute
html
<meta name="viewport" content="width=device-width, user-scalable=no" />You should consider, however, that when you want to disable user scalability for a web page, first you'll need to ensure the page is fit to the device viewing it. So it is very common to use this attribute along with the initial-scale and maximum-scale attributes. Now let’s try an example to make it clearer.
Example of disabling the zoom on <p> tags:
Example of how to disable zoom with html user-scalable attribute
html
<!DOCTYPE html>
<html>
<head>
<title>Disable the Zoom</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
body {
width: 500px;
border: 3px solid #4a91d8;
}
h1 {
color: #4a91d8;
text-align: center;
text-shadow: 1px 3px 2px #000;
}
p {
font-size: 18px;
padding: 5px 0;
margin: 10px;
width: 220px;
min-height: 320px;
border: 2px solid #4a91d8;
}
div::after {
content: "";
clear: both;
display: table;
}
p:first-child {
float: left;
}
p:last-child {
float: right;
}
</style>
</head>
<body>
<h1>
Lorem Ipsum
</h1>
<div class="clearfix">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</body>
</html>Example of disabling the zoom on <img> tags:
Example of how to disable zoom on a Mobile Web Page with user-scalable attribute
html
<!DOCTYPE html>
<html>
<head>
<title> Disable the Zoom</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
body {
width: 630px;
border: 3px solid #4a91d8;
height: auto;
}
h1 {
color: #4a91d8;
text-align: center;
text-shadow: 1px 3px 2px #000;
}
img {
border: 2px solid black;
margin: 5px;
}
div::after {
content: "";
clear: both;
display: table;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<div>
<h1>
Houses
</h1>
<img src="https://cdn.vox-cdn.com/thumbor/RVclEmJ7_fDjExXPmUtHZ2nOeCU=/0x0:3000x2000/1200x800/filters:focal(1260x760:1740x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/60890575/LizKuball_180512_0066_HighRes_Bungalow_Heaven.0.jpg" alt="House 1" width="396" class="left" />
<img src="http://www.greenhomebuilding.com/images/booksetc/naturalbuilding1.jpg" alt="House 2" width="196" class="right" />
<img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/8B96/production/_105243753_house.jpg" alt="House 3" width="396" class="left" />
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVAFvLYZXJ3xBEFRTnXe60ANdxJVCCisVXdkFzWKwJbCEjKMwxYw" alt="House 1" width="196" height="101" class="right" />
<p>
<strong>Note:</strong> Not zoomable on mobile
</p>
</div>
</body>
</html>INFO
As many developers have overused this solution, most modern browsers (including iOS Safari and Chrome for Android) ignore the user-scalable=no attribute to preserve accessibility. Read the next section for a CSS solution that works across devices!
WARNING
Don’t use a responsive <meta> tag if your website isn't specifically designed to be responsive and works well at that size, as otherwise, it will make the experience worse.
How to disable the zoom with CSS
We saw a HTML solution to completely disable zooming on web pages in the previous section. We also mentioned the downsides, and now you know that the HTML option doesn't work for iOS Safari. Most of the times, however, we don't really want to disable zooming altogether, we just want to disable certain zoom options that damage user experience. One of the most common situations is the <input> elements' automatic zooming.
To prevent the automatic zooming on input elements, it's enough to set CSS font-size property to 16px or higher.
It will look like this:
How to add font-size to input tag?
css
input[type='text'],
input[type='number'],
input {
font-size: 16px;
}Example of disabling the zoom with CSS:
Example of how to disable zoom on a Mobile Web Page with CSS font-size Property
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
input {
font-size: 16px;
}
input:focus {
font-size: 16px;
}
</style>
</head>
<body>
<form action="/form/submit" method="get">
<div>
<label for="name">Your Name:</label>
<input type="text" name="first_name" id="name"/>
</div>
<div>
<label for="surname">Your Surname:</label>
<input type="text" name="last_name" id="surname"/>
</div>
<div>
<label for="email">Enter Your E-Mail:</label>
<input type="email" name="user_email" id="email"/>
</div>
<input type="submit" value="Submit"/>
</form>
</body>
</html>You can also try the following:
How to add font-size to input tag for IOS?
css
@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
}
}note
This media query hack is legacy. For modern browsers, consider using
touch-action: manipulation;on form elements to prevent double-tap zoom while keeping pinch-to-zoom available.
Example of disabling the zoom:
Example of how to disable zoom on a Mobile Web Page with CSS font-size Property for IOS
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
input {
font-size: 16px;
}
input:focus {
font-size: 16px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
}
}
</style>
</head>
<body>
<form action="/form/submit" method="get">
<div>
<label for="name">Your Name:</label>
<input type="text" name="first_name" id="name" />
</div>
<div>
<label for="surname">Your Surname:</label>
<input type="text" name="last_name" id="surname" />
</div>
<div>
<label for="email">Enter Your E-Mail:</label>
<input type="email" name="user_email" id="email" />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>