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

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 eduational 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>                                        

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                                                   

chevron_right




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.