Para deshabilitar la opción de zoom con el gesto multitáctil, podemos usar el navegador surefox , pero aún así, un usuario puede acercar o alejar la imagen tocando dos veces en la pantalla. Podemos usar la etiqueta <meta> para deshabilitar el acercamiento y alejamiento en una página web móvil.
Sintaxis:
<meta name="viewport" content= "width=device-width, user-scalable=no">
Pasos para implementar en el navegador móvil:
- Descargar emulador de opera móvil.
- Instale el archivo descargado y ejecute el emulador.
- Elija los dispositivos preferidos de su dispositivo de la lista.
- Arrastre su archivo a ese emulador para ejecutar el archivo sin capacidad de zoom.
Ejemplo no ampliable:
Ejemplo ampliable:
Ejemplo: este ejemplo usa user-scalable=no para deshabilitar el zoom en la página web móvil.
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>
Producción:
Ejemplo 2: este ejemplo usa user-scalable=no para deshabilitar el zoom en la página web móvil.
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>
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA