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