web-dev-qa-db-fra.com

Désactiver le zoom sur un div, mais autoriser le zoom sur la page (un autre div)

Existe-t-il un moyen de désactiver le zoom sur une div ou d’autres éléments d’un site Web? Par exemple, si je voulais que la page puisse être zoomée, mais pas le div #Header, y a-t-il un moyen de rendre l’un zoomable et l’autre non zoomable?

Fondamentalement, lorsque vous effectuez un zoom sur un appareil mobile, il effectue également un zoom sur l'en-tête, mais je veux que l'en-tête ait une taille fixe à tout moment (non zoomable).

Je sais que vous pouvez utiliser ce code pour désactiver le zoom global:

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

csshtmlzoomfixed
36
GJDesigns

Vous ne pouvez pas faire cela sans astuces intelligentes.

Cependant, vous pouvez (et devriez) utiliser les CSS suivants pour résoudre les problèmes de zoom sur les appareils mobiles:

header {
    position: fixed;
    ...
}

@media only screen and (max-width: 720px) {
    header {
        position: absolute;
    }
}

Ce code active position: absolute lorsque la largeur d'affichage est inférieure ou égale à 720px et que l'en-tête devient la partie de la page plutôt que d'être fixé en haut.

7
Aleksej Komarov

Je ne pense pas que vous puissiez le faire directement. Une option possible serait de détecter le zoom à travers les événements js et les éléments d’échelle en conséquence.

Une autre option serait de "casser" la touche CTRL pour désactiver le zoom sur votre site Web, mais ce n'est qu'un gros no-no.

0
mkey

En bref, vous pouvez certainement le faire.

Vous pouvez intercepter les événements de redimensionnement de fenêtre et redimensionner votre div flottante en fonction du changement de dpi calculé à partir des divers attributs de la nouvelle fenêtre et de la largeur intérieure et de la hauteur.

Ainsi, lorsque vous effectuez un zoom avant, vous souhaitez réduire le div flottant afin qu'il conserve le dpi d'origine et vice versa.

Ce serait un violon épique - revisiter cette réponse bientôt, car je pourrais devoir faire une telle chose. Vous remarquez déjà des incohérences entre les navigateurs avec les dpi, alors amusez-vous.

0
Dominic Cerisano