Comment Désactiver Zoom sur une Page Web Mobile en Utilisant HTML et CSS?
L'option de zoom n'est pas toujours utile. L'un des inconvénients plus fréquents auquel les dévelopeurs et les utilisateurs font face est le zoom sur les pages web mobiles. Bon, nous sommes ici pour vous aider à fixer ce problème. Vous pouvez simplement utiliser le navigateur Surefox pour désactiver l'option de zoom, mais encore, la page zoomera si vous tapez deux fois sur l'écran, donc essayez les méthodes proprosées par HTML et CSS.
1. Comment désactiver le zoom en utilisant HTML.
La manière la plus commune de désactiver le zoom est en utilisant la balise HTML <meta>. L'attribut user-scalable permet à l'appareil de zoomer. Vous devez définir la valeur “no” pour cet attribut pour désactiver l'option de zoom.
Il doit ressmembler à cela:
<meta name="viewport" content="width=device-width, user-scalable=no">Maintenant essayons un exemple pour le faire plus clair.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>
Désactiver le Zoom
</title>
<meta meta name="viewport" content="width=device-width, user-scalable=no" />
<style>
body {
width: 500px;
border: 3px solid #4a91d8;
}
h1 {
color: #4a91d8;
text-align: center;
text-shadow: 1px 3px 2px #000;
}
p {
font-size: 18px;
padding: 5px 0;
margin: 10px;
width: 220px;
height: 320px;
border: 2px solid #4a91d8;
}
div::after {
content: "";
clear: both;
display: table;
}
p:first-child {
float: left;
}
p:last-child {
float: right;
}
</style>
</head>
<body>
<h1>
Lorem Ipsum
</h1>
<div class="clearfix">
<p>
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla
ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
</p>
<p>
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla
ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
</p>
</div>
</body>
</html>Voyons un autre exemple:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>
Désactiver le Zoom
</title>
<meta meta name="viewport" content="width=device-width, user-scalable=no" />
<style>
body {
width: 630px;
border: 3px solid #4a91d8;
height: auto;
}
h1 {
color: #4a91d8;
text-align: center;
text-shadow: 1px 3px 2px #000;
}
img {
border: 2px solid black;
margin: 5px;
}
div::after {
content: "";
clear: both;
display: table;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<div>
<h1>
Houses
</h1>
<img
src="https://cdn.vox-cdn.com/thumbor/RVclEmJ7_fDjExXPmUtHZ2nOeCU=/0x0:3000x2000/1200x800/filters:focal(1260x760:1740x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/60890575/LizKuball_180512_0066_HighRes_Bungalow_Heaven.0.jpg"
alt="House 1"
width="396"
class="left"
/>
<img src="https://www.boutiquehomes.com.au/sites/default/files/400_Montauk%2047%20and%2049%20-%20Greyson%20facade.jpg" alt="House 2" width="196" class="right" />
<img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/8B96/production/_105243753_house.jpg" alt="House 3" width="396" class="left" />
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVAFvLYZXJ3xBEFRTnXe60ANdxJVCCisVXdkFzWKwJbCEjKMwxYw" alt="House 1" width="196" height="101" class="right" />
<p>
<strong>Note:</strong>
Non zoomable sur mobile
</p>
</div>
</body>
</html>2. Comment désactiver le zoom en utilisant CSS.
Si vous utilisez la balise HTML <input>, l'IOS zoomera si la propriété CSS font-size est définie à moins que 16 px. Donc, essayez d'ajouter l'un des suivants dans votre CSS:
Il ressemblera à cela:
input[type="text"],
input[type="number"],
input {
font-size: 16px;
}Essayons un exemple.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
input {
font-size: 16 px;
}
input:focus {
font-size: 16px;
}
</style>
</head>
<body>
<form action="getform.php" method="get">
Votre Prénom: <input type="text" nom="prénom" /> Votre Nom: <input type="text" nom="nom" /> Entrer Votre E-Mail: <input type="email" nom="user_email" />
<input type="submit" value="Envoyer" />
</form>
</body>
</html>Si vous utilisez WP, vous devez probablement ajouter !important après 16px pour surcharger le thème initial.
Vous pouvez essayer cela:
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select,
textarea,
input {
font-size: 16px;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
}
}Voyons un exemple.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
input {
font-size: 16 px;
}
input:focus {
font-size: 16px;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select,
textarea,
input {
font-size: 16px;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
}
}
</style>
</head>
<body>
<form action="getform.php" method="get">
Votre Prénom: <input type="text" name="first_name" /> Votre Nom: <input type="text" name="last_name" /> Entrer Votre E-Mail: <input type="email" name="user_email" />
<input type="submit" value="Envoyer" />
</form>
</body>
</html>