ズームクロスブラウザを防止
地図のようなツールの場合、ブラウザのズーム機能を無効にします。 （これは一般に悪い考えであることは知っていますが、特定のウェブサイトには必要です）
キーボードショートカットを聞いて成功しました CTRL+ / CTRL- e.preventDefault()などを追加しますしかし、これはブラウザのズームメニューからズームを変更することを妨げません。
私は試した：
cSSの場合：
zoom: reset;Chromeで機能します（ 動作例についてはこのページ を参照）が、Firefoxではまったく機能しません。さまざまな質問/回答で、私も見つけました
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">しかし、これはモバイルでのみ機能するようです。
クロスブラウザのズームを防ぐ方法？
このコードでは、Ctrl +またはCtrl-を使用するか、Ctrlキー+マウスホイールを上下に動かすことで、ブラウザーのズームを無効にできます。
$(document).keydown(function(event) {
if (event.ctrlKey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109' || event.which == '187' || event.which == '189' ) ) {
event.preventDefault();
}
// 107 Num Key +
// 109 Num Key -
// 173 Min Key hyphen/underscor Hey
// 61 Plus key +/= key
});
$(window).bind('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey == true) {
event.preventDefault();
}
});
ここでデモを確認してください http://jsfiddle.net/VijayDhanvai/4m3z3knd/
ブラウザの開発者からの明確な声明を意味する「信頼できる」答えを実際に見つけていません。ただし、私が見つけた同様の質問に対するすべての回答（ this one または that one など）は同じことを示唆しています-ユーザーの利益のためにブラウザのズーム機能が存在し、一部のブラウザ（Firefoxなど）では、Webサイトの作成者として、このオプションを削除することはできません。
このドキュメント モバイルデバイスでは作成者がズームを無効にできるのは良い考えですが、デスクトップでは考えられない理由を明らかにするかもしれません。
つまり、計算された自動ズームが不適切であることがわかっている場合、モバイルデバイスが最初にWebサイトを自動ズームしないようにする必要があります。 デスクトップには自動ズームがないため、ユーザーがウェブサイトにアクセスすると、意図したとおりに表示されます。その後、彼らはページをズームする必要があると判断します、あなたがそうするのを防ぐことができる正当な理由はありません。
あなたがリストしたソリューションに関して：
zoomは非標準のプロパティです Firefoxではサポートされていません<meta name="viewport">は、layout viewportおよびvisual viewportが 同じものではない） 、つまりモバイルデバイス。
あなたができることは、ブラウザのズームイベント（ctrl + "+"）を聞いて、window.devicePixelRatioを確認することだと思います。
次に、body要素にHTML5スケール変換を適用して、同じ比率で縮小します。したがって、基本的に機能を防ぐことはできませんが、同じ大きさでマイナスの効果を適用できます。
POCコード：
<body style="position: absolute;margin: 0px;">
<div style="width: 300px; height: 200px; border: 1px solid black;">
Something is written here
</div>
<script>
var keyIncrease = [17, 61];
var keyDecrease = [17, 173];
var keyDefault = [17, 48];
var listenMultiKeypress = function(keys, callback){
var keyOn = [];
for(var i=0; i<keys.length; i++){
keyOn[i] = false;
}
addEventListener('keydown', function(e){
var keyCode = e.which;
console.log(keyCode);
var idx = keys.indexOf(keyCode);
if(idx!=-1){
keyOn[idx] = true;
}
console.log(keyOn);
for(var i=0; i<keyOn.length; i++){
if(!keyOn[i]){
return;
}
}
setTimeout(callback, 100);
});
addEventListener('keyup', function(e){
var keyCode = e.which;
var idx = keys.indexOf(keyCode);
if(idx!=-1){
keyOn[idx] = false;
}
console.log(keyOn);
});
};
var previousScale = 1;
var previousDevicePixelRatio;
var neutralizeZoom = function(){
//alert('caught');
var scale = 1/window.devicePixelRatio;
document.body.style.transform = 'scale('+(1/previousScale)+')';
document.body.style.transform = 'scale('+scale+')';
var widthDiff = parseInt(getComputedStyle(window.document.body).width)*(scale-1);
var heightDiff = parseInt(getComputedStyle(window.document.body).height)*(scale-1);
document.body.style.left = widthDiff/2 + 'px';
document.body.style.top = heightDiff/2 + 'px';
previousScale = scale;
};
listenMultiKeypress(keyIncrease, neutralizeZoom);
listenMultiKeypress(keyDecrease, neutralizeZoom);
listenMultiKeypress(keyDefault, neutralizeZoom);
neutralizeZoom();
</script>
</body>
</html>
したがって、前述したように、それは実際には不可能です。ただし、まだ賢い方法はいくつかあります。
5つの主要なブラウザのうち3つすべてで、ブラウザのズームレベルを確認できます。さらに、ブラウザがズームされると window.onresize イベントが発生します。
IE: event.view.devicePixelRatio OR window.view.devicePixelRatio
Chrome: event.currentTarget.devicePixelRatio OR window.devicePixelRatio
Firefox: event.originalTarget.devicePixelRatio OR window.devicePixelRatio
Safari: /* Not possible */
Opera: /* Not possible */
ORの後のものは、いじくり回しているときに気づいたものに基づいて機能すると思います。私が知っている最初のものは、少なくともそれぞれの最新バージョンで動作します。 SafariとOperaの両方にdevicePixelRatioがありますが、両方が変更されることはありません。常に1だけです。
上記は、thatをあまり気にしない場合の簡単な方法です。もしそうなら、 detect-zoom スクリプトを試すことができます。これは、SafariとOperaのソリューションを探しているときに出会ったものです。
したがって、今できることは、ズームレベルを取得し、何もしない場所にズームをオフセットすることです。したがって、ブラウザを50％ズームに強制すると、200％になります。したがって、変更はありません。もちろん、もう少し複雑になります。最後のブラウザーズーム、新しいブラウザーズームを保存し、もう少し複雑な計算を行う必要がありますが、既にあるものに基づいて、それは簡単なはずです。
別のアイデアは、単にサイズ変更イベントをリッスンし、新しい表示サイズに基づいて計算することですが、ウィンドウのサイズを変更しただけでは問題が発生する可能性があります。おそらく、必要に応じてズームしないようユーザーに警告するフォールバックalertを使用して、上記が最良のオプションになると思います。
コードVijayコードを更新しました：
$(document).ready(function(){
var keyCodes = [61, 107, 173, 109, 187, 189];
$(document).keydown(function(event) {
if (event.ctrlKey==true && (keyCodes.indexOf(event.which) != -1)) {
alert('disabling zooming');
event.preventDefault();
}
});
$(window).bind('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey == true) {
alert('disabling zooming');
event.preventDefault();
}
});
});
このソリューションは、デスクトップブラウザ向けのクロスプラットフォーム（OS/Win）です。
以下をHTMLに挿入します。
モバイルの場合： '<head> ... </ head>'タグの間に挿入します。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
クロスブラウザの場合：開始 '<body> ...'タグの直後に挿入します。
<script>
document.body.addEventListener("wheel", e=>{
if(e.ctrlKey)
event.preventDefault();//prevent zoom
});
</script>
それは単純だ：
function load(){
document.body.addEventListener("wheel", zoomShortcut); //add the event
}
function zoomShortcut(e){
if(e.ctrlKey){ //[ctrl] pressed?
event.preventDefault(); //prevent zoom
if(e.deltaY<0){ //scrolling up?
//do something..
return false;
}
if(e.deltaY>0){ //scrolling down?
//do something..
return false;
}
}
}p {
display: block;
background-color: #eeeeee;
height: 100px;
}<!DOCTYPE html>
<html>
<head>
<title>Mousewheel control!</title>
</head>
<body onload="load()">
<p>If your Mouse is in this Box, you can't zoom.</p>
</body>
</html>$(document).ready(function () {
$(document).keydown(function (event) {
if (event.ctrlKey == true && (event.which == '107' || event.which == '109' || event.which == '187' || event.which == '189'))
{
event.preventDefault();
}
});
$(window).bind('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey == true) {
event.preventDefault();
}
});
})
やってみました ...
$("body").css({
"-moz-transform":"scale(1)",
"-webkit-transform":"scale(1)",
"-o-transform":"scale(1)",
"-ms-transform":"scale(1)"
});
このタイプのコードを使用して、スケールを設定または再設定しました。