web-dev-qa-db-fra.com

Désactiver le zoom par pincement sur le Web mobile

Je veux désactiver le pincement et le zoom sur les appareils mobiles.

Quelle configuration dois-je ajouter à la fenêtre?

Lien: http://play.mink7.com/n/dawn/

htmlcssmobile-websiteviewport
66
Harsha M V

EDIT: Parce que cela continue à être commenté, nous savons tous que nous ne devrions pas faire cela. La question était comment je le fais, pas devrait je le fais.

Ajoutez ceci dans vos appareils mobiles. Ensuite, faites vos largeurs en pourcentages et tout ira bien:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Ajoutez ceci pour les périphériques qui ne peuvent pas utiliser la fenêtre aussi:

<meta name="HandheldFriendly" content="true" />
143
SpaceBeers

C'est tout ce dont j'avais besoin:

<meta name="viewport" content="user-scalable=no"/>
12
quemeful

À tous ceux qui ont dit que c'était une mauvaise idée, je veux dire que ce n'est pas toujours une mauvaise idée. Parfois, il est très ennuyeux de devoir faire un zoom arrière pour voir tout le contenu. Par exemple, lorsque vous tapez sur une entrée sur iOS, il effectue un zoom pour le placer au centre de l'écran. Vous devez effectuer un zoom arrière après que la fermeture du clavier ne fonctionne pas. De plus, je conviens que lorsque vous mettez beaucoup d’heures à faire une mise en page et une expérience utilisateur exceptionnelles, vous ne voulez pas que cela soit gâché par un zoom.

Mais l'autre argument est également valable pour les personnes ayant des problèmes de vision. Cependant, à mon avis, si vous avez des problèmes d’œil, vous utilisez déjà les fonctions de zoom du système, il n’est donc pas nécessaire de perturber le contenu.

9
Thibaut Rey

Malheureusement, la solution proposée ne fonctionne pas dans Safari 10+, car Apple a décidé d'ignorer user-scalable=no. Ce fil a plus de détails et quelques astuces JS: désactiver la fenêtre d'affichage zoomant sur le safari iOS 10+?

6
s-f

IE a sa propre manière: Une propriété css, -ms-content-zooming. Le paramétrer sur aucun sur le corps ou quelque chose devrait le désactiver.

Désactiver le pincement pour zoomer IE1

http://msdn.Microsoft.com/en-us/library/ie/hh771891 (v = vs.85) .aspx

4
nafg

cela empêchera toute action de zoom de l'utilisateur dans ios safari, ainsi que la fonctionnalité "zoom sur les onglets":

document.addEventListener('gesturestart', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
}

document.addEventListener('gesturechange', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
}

document.addEventListener('gestureend', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
}

jsfiddle: https://jsfiddle.net/vo0aqj4y/11/

4
trias

Trouvé ici vous pouvez utiliser user-scalable=no:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
2
some one

Essayez avec la propriété min-width. Laisse moi t'expliquer. Supposons un appareil avec une largeur d'écran de 400px (par exemple). Lorsque vous effectuez un zoom avant, les polices deviennent de plus en plus grandes. Mais les boîtes et les divs restent avec la même largeur. Si vous utilisez min-width, vous pouvez éviter de diminuer votre div et box.

0
Ajay Sharma