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.
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.
<!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>
<!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>
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;
}
<!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;
}
}
<!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>