Désactiver l'effet de zoom CTRL/Roue au moment de l'exécution

Question

Comment désactiver l'effet de zoom ctrl/wheel avec css ou javascript sur certains éléments. Je crée une barre de menu qui est déformée lorsque l'effet de zoom est appliqué. Je voudrais le désactiver pour seulement certains éléments.

Answer 1

Vous ne pouvez pas; c'est une fonctionnalité de navigateur, pas une fonction de document. Cela dit, si vous utilisez CSS style = "font-size: 9px;", vous pouvez remplacer la taille du texte. Le zoom du navigateur fonctionnera toujours et les changements de taille de la police du navigateur auront des effets de reformatage.

Answer 2

Meilleure idée: concevez votre mise en page pour qu'elle soit suffisamment robuste pour gérer les changements de ce type. Vous ne pouvez pas les désactiver, même si vous fixez la taille de la police (ce que vous ne devriez jamais faire en premier lieu), alors vous pourriez aussi bien répondre au zoom gracieusement. En fait, si tous les éléments sont mis à l'échelle de la même manière par le navigateur, votre page devrait ressembler et fonctionner exactement comme avant (sauf, vous le savez, plus gros), sauf si vous avez pris des raccourcis paresseux quelque part.

Answer 3

Voici mon problème: J'ai toujours conçu avec ems, et ils fonctionnent magiquement. Mais avec un zoom pleine page, mes arrière-plans sont également zoomés. Si j'ai un motif répété comme arrière-plan principal, je ne veux pas que cela devienne pixelisé. Ils nous aident à éviter certains travaux, comme la mise en œuvre de Sliding Doors of CSS de Doug Bowman, mais maintenant je dois vivre avec des onglets flous. J'ai également un autre problème avec le zoom page entière, au moins tel qu'il est implémenté dans les navigateurs d'aujourd'hui: Je fais partie de ceux qui ont configuré mon navigateur à la police 12pt au lieu de 16pt. De temps en temps, je tombe sur un site (à largeur fixe, bien sûr) qui redimensionne le texte à une taille minuscule (je suppose qu'ils ont utilisé 0.9em ou quelque chose, au lieu de 14px, tout en essayant de le faire plus petit). Je ferais d'habitude juste un zoom dans un cran ou deux, et tout irait bien. Avec le zoom pleine page, cependant, les images s'agrandissent mal et j'ai une barre de défilement horizontale.

La solution au premier problème consisterait à autoriser une sorte d'instruction de traitement dans l'étiquette d'image d'arrière-plan pour interdire le zoom de pleine page sur cet élément. Ou peut-être quelque chose dans la tête du document. Si les navigateurs veulent vraiment être honnêtes à ce sujet, ils pourraient également donner aux utilisateurs une option qu'ils pourraient définir qui écrase l'instruction sans zoom, afin qu'ils puissent zoomer quand même s'ils le souhaitent. La solution au deuxième problème serait pour le zoom de pleine page pour convertir tout le px en em à un taux de 16px/em d'abord, et puis zoom vers le bas à votre taille de texte, au lieu de convertir px en em en utilisant votre texte taille comme base. Ensuite, le défilement jusqu'à 16px rendrait les images parfaitement dimensionnées, comme prévu. solution

Answer 4

pour IE et Firefox:

var obj=document.body; // obj=element for example body 
// bind mousewheel event on the mouseWheel function 
if(obj.addEventListener) 
{ 
    obj.addEventListener('DOMMouseScroll',mouseWheel,false); 
    obj.addEventListener("mousewheel",mouseWheel,false); 
} 
else obj.onmousewheel=mouseWheel; 

function mouseWheel(e) 
{ 
    // disabling 
    e=e?e:window.event; 
    if(e.ctrlKey) 
    { 
     if(e.preventDefault) e.preventDefault(); 
     else e.returnValue=false; 
     return false; 
    } 
}