How to disable zoom on a mobile web page using CSS?

Last Updated : 23 Aug, 2021

To disable the zooming option with the multi-touch gesture we can use surefox browser but still, a user can zoom in or out by double tapping on the screen. We can use the <meta> tag to disable zoom in and out on a mobile web page.
Syntax:

<meta name="viewport" content= "width=device-width, user-scalable=no">

Steps to implement on mobile browser:

Download opera mobile emulator
Install the downloaded file, and run the emulator.
Choose your device preferred devices from the list.
Drag your file into that emulator to run the non_zoom-able file.

Non-zoomable Example:

Zoomable Example:

Example: This example uses user-scalable=no to disable zoom on mobile web page.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Disable Double-Tap to Zoom
    </title>
     
    <meta meta name="viewport" content= 
            "width=device-width, user-scalable=no" />
 
    <style>
        body {
            height:410px;
            width:600px;
            border: 2px solid green;
        }
        p {     
            font-size:20px; 
            padding:5px;
            margin:7px;
            width:270px;
            height:300px;
            border:2px solid green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;text-shadow: 1px 3px 2px #000">
            GeeksforGeeks
        </h1>
         
        <div>
            <p style=" float:left; "> 
                It is a good platform to learn programming.
                It is an educational website. Prepare for the
                Recruitment drive of product based companies
                like Microsoft, Amazon, Adobe etc with a free
                online placement preparation course. The 
                course focuses on various MCQ's & Coding 
                question likely to be asked in the interviews
                & make your upcoming placement season 
                efficient and successful. 
            </p>
 
             
            <p style="float:right;">
                Also, any geeks can help other geeks by writing
                articles on the GeeksforGeeks, publishing
                articles follow a few steps that are Articles
                that need little modification/improvement from
                reviewers is published first. To quickly get 
                your articles reviewed, please refer existing
                articles, their formatting style, coding style,
                and try to make you are close to them. 
            </p>
 
        </div>
    </center>
</body>
 
</html>                                        

Output:

Example 2: This example uses user-scalable=no to disable zoom on mobile web page.

html

<!DOCTYPE html>
<html>
 
<head>    
    <title>
        Disable Double-Tap to Zoom
    </title>
 
    <meta meta name="viewport" content= 
            "width=device-width, user-scalable=no" />
    <style>
        body {
            height:415px;
            width:630px;
            border: 2px solid green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
         
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/6-86.png"
        alt="" style="width:396px; border:2px solid black;
                     float:left; margin:7px;"/>
                      
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/5-113.png"
        alt=""style="width:196px; border:2px solid black;
                    float:right; margin:7px;" />
                     
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/3-58.jpg"
        alt="" style="width:396px; border:2px solid black; 
                    float:left; margin:7px;"/>
                     
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/2-528.png"
        alt="" style="width:196px; height:101px;
                border:2px solid black; float:right;margin:7px;"/>
         
         
<p><b>Note:</b>Not zoomable on mobile</p>
 
    </center>
</body>
</html>                                                   