Désactiver le zoom sur une div, mais permettre d'effectuer un zoom sur la page (un autre div)

Est-il un moyen de désactiver le zoom sur une div, ou tout élément sur un site web? Par exemple, si je voulais la page pour être zoomable, mais pas l'en-Tête #div, est-il possible de faire un zoom, et l'autre pas zoomable?

Fondamentalement, lorsque vous effectuez un zoom avant sur un appareil mobile, il zoome sur l'en-Tête de trop, mais je veux l'en-tête à une taille fixe à tous les temps (pas de zoom).

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' />
Si vous effectuez un zoom avant sur l'ensemble de la page ou particulier sur votre tête? Ou plus loin si vous touchez simplement l'en-tête ou le total de la page? Et, au fait: Pourquoi voulez-vous que? Le visiteur ne peut pas afficher la page entière... un peu de merde, hein?
Rencontré le même problème et a réussi à (presque) résoudre: stackoverflow.com/questions/27983673/...

OriginalL'auteur GJDesigns | 2012-12-14

  1. 7

    Vous ne pouvez pas le faire sans intelligent hacks.

    Cependant, vous pouvez (et devez) utiliser le code CSS suivant pour fixer zoom questions sur les appareils mobiles:

    header {
    position: fixed;
    ...
}

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

    Ce code permet position: absolute lors de l'affichage de la largeur est inférieure ou égale 720px, et de l'en-tête devient la partie de la page, plutôt que d'être fixé sur le dessus.

    Il est théoriquement possible de vérifier ce type de réponse: stackoverflow.com/questions/15233076/...
    Est-ce une question similaire, avec la même solution? stackoverflow.com/questions/29674936/... >> Pas fonctionné pour moi
    Détecter le toucher et hybride tactile/souris à ceci et ensuite modifier l'en-tête ou un élément fixe de la valeur de style pour absolute. Comme ça lors d'un zoom sur mobile tactile ou de dispositifs d'entrée de l'élément fixe(s) ne rompt pas le reste du site, mais sont nativement zoomable par navigateur et l'OS et la plupart de toutes les spécifications des utilisateurs (niveau de zoom, etc.).
    J'irais même jusqu'à dire, généralement de l'utilisateur zoom fixe absolu pour ordinateur de Bureau et Mobile et Tactile Hybride/périphériques de Souris. Dans l'avenir, laissez navigateur et l'OS de gérer le Zoom, l'utilisateur heureux, l'accessibilité accordé, c'est fait. Rappelez-vous, il n'est pas de votre responsabilité pour le site à l'oeil sensible quand il s'est agrandie! C'est la décision d'un utilisateur et en faisant de sorte que l'utilisateur veut faire un zoom sur tous une partie de la page, non seulement le contenu. Donc, à l'exclusion de certains divs de zoom n'est pas bon.
    Je l'ai essayé, mais il ne fonctionne pas @AleksejKomarov. Pourriez-vous fournir un exécutable exemple? (pas dans le cadre d'un extrait de code, parce que SI les extraits sont non praticable sur les téléphones Android - j'ai déjà posté une méta-demande à ce sujet)

    OriginalL'auteur Aleksej Komarov

  2. 0

    Je ne pense pas que vous pouvez le faire directement. Une option possible serait de détecter le zoom par js événements et de l'échelle des éléments en conséquence.

    Une autre option serait de "casser" la touche CTRL enfoncée pour désactiver le zoom sur votre site web, mais c'est juste un gros no-no.

    OriginalL'auteur mkey

  3. 0

    En plus courte, vous pouvez certainement le faire.

    Vous pouvez intercepter les événements de redimensionnement de la fenêtre et de redimensionner votre div flottante selon le dpi changement calculés à partir des différentes nouvelle fenêtre intérieure et attributs width et height.

    Donc, quand vous zoom, vous voulez rétrécir la div flottante de sorte qu'il conserve l'original dpi, et vice versa.

    Ce serait une épopée de violon revoir cette réponse bientôt, car j'ai peut-être de faire une telle chose. Déjà remarquer quelques croix-navigateur incohérences avec le dpi, alors, oui, le plaisir.

    Auriez-vous un exécutable exemple @DominicCerisano? Serait super utile, tant que l'on a accepté la réponse n'a pas vraiment de travail (voir la section imgur.com/a/Yumvk).
    Comme je l'ai mentionné, ce serait beaucoup de travail car il nécessiterait des implémentations distinctes pour chaque navigateur (Chrome, MOZ, etc) et de la plate-forme (PC, mobile, etc).

    OriginalL'auteur Dominic Cerisano

  4. -4

    Si vous utilisez angulaire, il est un moyen de donner un id à votre en-tête de div, puis d'écrire le code suivant dans le contrôleur:

    document.getElementById("viewport").setAttribute('content','user-scalable=yes, width=device-width, minimum-scale=1, maximum-scale=1');

    Que j'ai utilisé dans mon projet et ça a bien fonctionné..

    OriginalL'auteur pratik