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






                        filter_none








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= 


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



















                        chevron_right







                        filter_none











full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Sabya_Samadder
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.