How to Disable Zoom on a Mobile Web Page With HTML and CSS
The zooming option is not always useful. One of the most common inconveniences both developers and users face is the zoom on mobile web pages. Well, we’re here to help you fix that problem. 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 the zoom 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">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>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¶
If you use an <input> tag, the IOS will zoom if the CSS font-size property is set to less than 16 px. So, try adding one of the following pieces of code in your CSS.
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>Thanks for your feedback!
Do you find this helpful?