Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Last Updated : 23 Aug, 2021
View Discussion
Improve Article
Save Article

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=
        alt="" style="width:396px; border:2px solid black;
                     float:left; margin:7px;"/>
                      
        <img src=
        alt=""style="width:196px; border:2px solid black;
                    float:right; margin:7px;" />
                     
        <img src=
        alt="" style="width:396px; border:2px solid black;
                    float:left; margin:7px;"/>
                     
        <img src=
        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>                                                  



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!