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 applications, 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:
<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:
<!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:
<!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>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:
input[type='text'],
input[type='number'],
input {
font-size: 16px;
}Example of disabling the zoom with CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
input {
font-size: 16 px;
}
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:
@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;
}
}Example of disabling the zoom:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
input {
font-size: 16 px;
}
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>