How do you disable the ctrl/wheel zoom effect with css or javascript on certain elements. I create a menu bar that gets distorted when the zoom effect is applied. I would like to disable it for just certain elements.
4 に答える
より良いアイデア: このような変更を処理するのに十分堅牢になるようにレイアウトを設計してください。フォント サイズを修正したとしても (そもそも修正してはいけません)、それらを無効にすることはできません。
実際のところ、すべての要素がブラウザーによって均等にスケーリングされている場合、ページは以前とまったく同じように表示され、機能するはずです (ただし、大きくなることを除けば)。
IE および 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;
}
}
これが私の問題です。私は常にemを使用して設計しており、それらは魔法のように機能します。ただし、フルページズームを使用すると、背景もズームインされます。メインの背景として繰り返しパターンがある場合は、それをピクセル化したくありません。DougBowmanのCSSのSlidingDoorsを実装するなど、いくつかの作業を回避するのに役立ちますが、今はぼやけたタブを使用する必要があります。
少なくとも今日のブラウザに実装されているので、フルページズームにも別の問題があります。私はブラウザを16ptではなく12ptフォントに設定した「それらの」人々の1人です。たまに、テキストのサイズを小さなサイズに変更する(もちろん固定幅の)サイトに出くわしました(14pxではなく0.9emか何かを使用して作成しようとしたと思います)小さい)。私は通常、1〜2ノッチズームインするだけで、すべてうまくいくでしょう。ただし、フルページズームでは、画像の拡大縮小が悪く、水平スクロールバーがあります。
最初の問題の解決策は、background-imageタグのある種の処理命令で、その要素の全ページズームを禁止することです。または、ドキュメントの頭の中にあるものかもしれません。ブラウザが本当にそれについて公平になりたい場合は、ズームなしの指示を上書きするように設定できるオプションをユーザーに提供することもできます。そのため、必要に応じてズームすることができます。2番目の問題の解決策は、テキストサイズを使用してpxをemに変換するのではなく、最初にすべてのpxを16px / emの速度でemに変換し、次にテキストサイズにズームダウンするフルページズームです。ベース。次に、16ピクセルまでスクロールして戻すと、意図したとおりに画像が完全なサイズになります。
You can't; this is a browser feature, not a document feature.
Having said that, if you use CSS's style="font-size: 9px;", you can override text size. Browser zoom will still work, and browser font size changes will have some reformatting effects.