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