[mobile] Empêcher zoom sur une div

**Airtux** · 08/03/2015, 14h59

Salut,

Je suis entrain de crée un site et j'aimerai l'adapté un peu pour les téléphones mobile, j'ai donc crée un bouton menu en position fixe en haut à droit de l'écran, le seul problème c'est que le bouton grossie avec la page quand on zoom, je suis pas sur que ce soit possible mais j'aimerai faire en sorte que ce bouton ne grossie pas quand on zoom.

j'ai vue qu'il était possible de désactiver totalement le zoom sur la page mais sa ne me conviens pas, j'ai besoin que seul le bouton ne zoom pas.

Merci

**invite948b37db** · 09/03/2015, 09h13

Envoyé par Airtux

Salut,
Je suis entrain de crée un site et j'aimerai l'adapté un peu pour les téléphones mobile, j'ai donc crée un bouton menu en position fixe en haut à droit de l'écran, le seul problème c'est que le bouton grossie avec la page quand on zoom, je suis pas sur que ce soit possible mais j'aimerai faire en sorte que ce bouton ne grossie pas quand on zoom.
j'ai vue qu'il était possible de désactiver totalement le zoom sur la page mais sa ne me conviens pas, j'ai besoin que seul le bouton ne zoom pas.
Merci

Bonjour
Tel que tu poses le problème, je ne crois pas que ce soit possible, alors prend le problème à l'envers.
Tu stocke le niveau de zoom au chargement de la page dans un <Input type ="hidden" value="0">
Tu détecte le changement de zoom de la page à l'aide de la balise <body>:

Code:

<body onresize="la_fonction_JS_qui_zoom_arriere()">

quand la page est zooumée, la fonction JS calcule le pourcentage de variation entre le nouveau zoom et l'ancien stocké dans l'input.
Ensuite la fonction "zoom arrière" ton élément de la valeur de la variation et stocke la nouvelle valeur dans l'input pour la prochaine fois.

**Airtux** · 10/03/2015, 03h13

Merci, mais bon après avoir chercher et tenté quelques bidouilles je n'y arrive pas... je suis mauvais en Javascript et apparemment le code que j'ai besoin est pas dans mes cordes...
Je pense que je vais laisser mon bouton menu tranquille.

invitef625d7cf · 10/03/2015, 09h49

Bonjour,

Je pense qu'il ne faut pas attaquer ce problème en Javascript, mais définir ceci dans la CSS.

Un bouton avec une propriété No Zoom, je vais te chercher ça.

A voir en vidéo sur Futura · Aujourd'hui

**invite948b37db** · 10/03/2015, 10h29

Envoyé par Pauldair

Bonjour,
Je pense qu'il ne faut pas attaquer ce problème en Javascript, mais définir ceci dans la CSS.
Un bouton avec une propriété No Zoom, je vais te chercher ça.

Bien vu Pauldair. exemple non testé :

Code:

<div style="max-width: 100px;min-width: 100px;min-height: 100px;max-height: 100px;">

Ceci étant, je pense que c'est une mauvaise idée. Le rendu écran sur mobiles est très variable, beaucoup plus que sur ordinateurs, l'objet risque d'être inexploitable dans certains cas.

**Airtux** · 10/03/2015, 15h44

@Pauldair Merci bien je veux bien la solution que tu me propose mais... contrairement au javascript je connais bien le CSS et je pense que avec uniquement du CSS c'est pas possible, d'ailleurs sauf erreur il n'y a pas de fonction No zoom en CSS, peut-être un mélange de javascript et de CSS.

@cherbe Merci mais avant même d'avoir tester le code je me doutais qu'il ne fonctionnerait pas... en effet la taille du bouton de change pas donc le width et le height ne change pas c'est juste le zoom qui fait grossir le bouton.

invite1cb4eccb · 11/03/2015, 07h13

Je ne suis pas fort en programmation Web, mais pourquoi ne pas utiliseruune iframe qui te permet d'avoir une page dans une page. Mon idée (après je peux me tromper) est la suivante :iframe non zoom able. Après faut voir si la taille de liframe change ou pas si tu zoom sur le site
En espérant avoir été utile

invitef625d7cf · 11/03/2015, 08h39

L'idée de Cherbe est sans doute la bonne, mais au lieu de px il faut utiliser des %. Il faut choisir le pourcentage en fonction de la taille désirée de ta div par rapport à l'écran. Teste par exemple:

Code:

<div style="max-width: 5%; min-width: 5%; min-height: 5%; max-height: 5%;">

[mobile] Empêcher zoom sur une div

[mobile] Empêcher zoom sur une div

Re : [mobile] Empêcher zoom sur une div

Re : [mobile] Empêcher zoom sur une div

Re : [mobile] Empêcher zoom sur une div

Re : [mobile] Empêcher zoom sur une div

Re : [mobile] Empêcher zoom sur une div

Re : [mobile] Empêcher zoom sur une div

Re : [mobile] Empêcher zoom sur une div

Discussions similaires

Batterie de secours pour mobile via une ancienne batterie de ce meme mobile