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

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>                                                  
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
rajeev0719singh
CSS-Misc
Picked
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?
CSS to put icon inside an input element in a form
How to position a div at the bottom of its container using CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript