對(duì)于類似地圖的工具，我想禁用瀏覽器縮放功能。(我知道一般來(lái)說(shuō)這是個(gè)壞主意，但是對(duì)于某些特定的網(wǎng)站來(lái)說(shuō)，這是需要的)。
我是通過(guò)監(jiān)聽(tīng)鍵盤快捷鍵CTRL + / CTRL -和添加e.preventDefault()等方式成功做到的。 但這并不妨礙從瀏覽器的縮放菜單中更改縮放。
我試過(guò)了:
用CSS:zoom:reset；它可以在Chrome上運(yùn)行(參見(jiàn)本頁(yè)的工作示例)，但在Firefox上根本不能運(yùn)行。
在各種問(wèn)題/答案中，我還發(fā)現(xiàn)
& ltmeta name = " viewport " content = " width = device-width，initial-scale=1，maximum-scale=1，user-scalable=no " >
但這似乎只適用于手機(jī)。
如何防止跨瀏覽器縮放？
我還沒(méi)有真正找到一個(gè)“權(quán)威”的答案，意思是瀏覽器開(kāi)發(fā)者的明確說(shuō)法。然而，我發(fā)現(xiàn)的所有類似問(wèn)題的答案(比如這個(gè)或那個(gè))都表明了同樣的事情——瀏覽器的縮放功能是為了用戶的利益而存在的，一些瀏覽器(比如Firefox)根本不允許你，作為一個(gè)網(wǎng)站創(chuàng)建者，從他們那里拿走這個(gè)選項(xiàng)。
這篇文檔可能會(huì)解釋為什么允許作者在移動(dòng)設(shè)備上禁用縮放可能是個(gè)好主意，但在桌面上卻不是。
簡(jiǎn)而言之，如果你知道移動(dòng)設(shè)備的自動(dòng)縮放是不合適的，你可能需要阻止移動(dòng)設(shè)備開(kāi)始自動(dòng)縮放你的網(wǎng)站。在桌面上，沒(méi)有自動(dòng)縮放功能，所以當(dāng)用戶訪問(wèn)你的網(wǎng)站時(shí)，他們看到的是它應(yīng)該被看到的樣子。如果他們隨后決定需要縮放頁(yè)面，你沒(méi)有理由阻止他們這樣做。
至于你列出的解決方案:
縮放是Firefox不支持的非標(biāo)準(zhǔn)屬性，并且 & ltmeta name="viewport " >僅涉及布局視口和視覺(jué)視口不同的設(shè)備，即移動(dòng)設(shè)備。 您可以在使用Ctrl + +或Ctrl + -或Ctrl +鼠標(biāo)滾輪向上或Ctrl +鼠標(biāo)滾輪向下時(shí)禁用瀏覽器中的縮放。
$(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/underscore key
// 61 Plus key +/= key
});
$(window).bind('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey == true) {
event.preventDefault();
}
});點(diǎn)擊這里查看一個(gè)演示:JSFiddle。
將以下內(nèi)容插入HTML:
對(duì)于手機(jī):在' & lthead & gt...& lt/head & gt；'標(biāo)簽。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">對(duì)于跨瀏覽器的桌面:在開(kāi)始后插入' & ltbody & gt...'標(biāo)簽。
<script>
document.body.addEventListener("wheel", e=>{
if(e.ctrlKey)
e.preventDefault();//prevent zoom
});
</script>我覺(jué)得你能做的就是，監(jiān)聽(tīng)瀏覽器縮放事件(ctrl + "+")，然后檢查window.devicePixelRatio。
然后相應(yīng)地，對(duì)body元素應(yīng)用HTML5 scale變換，以相同的比例縮小。所以，基本上你不能阻止這種功能，但是你可以施加相同程度的負(fù)面影響。
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>所以，正如已經(jīng)提到的，那真的是不可能的。然而，有一些方法可以讓你變得聰明。
五個(gè)主要瀏覽器中的三個(gè)都允許您查看瀏覽器的縮放級(jí)別，此外，如果瀏覽器縮放一個(gè)窗口，將觸發(fā)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 */我認(rèn)為之后的東西或作品是基于我在閑逛時(shí)注意到的一些東西。我所知道的第一個(gè)至少在eac h one的最新版本中工作。請(qǐng)注意，Safari和Opera都有devicePixelRatio，但是它們都不會(huì)改變。永遠(yuǎn)都只是1。
如果你不在乎那么多，以上是你的簡(jiǎn)單方法。如果你有，那么你可以嘗試一下檢測(cè)縮放腳本，這是我在尋找Safari和Opera的解決方案時(shí)偶然發(fā)現(xiàn)的。
所以你現(xiàn)在能做的就是得到縮放級(jí)別，然后把你的縮放偏移到?jīng)]有任何作用的地方。所以，如果我強(qiáng)迫我的瀏覽器縮放50%，你就可以縮放到200%。因此，沒(méi)有變化。當(dāng)然，這會(huì)有點(diǎn)復(fù)雜，你必須存儲(chǔ)上一次瀏覽器縮放，新的瀏覽器縮放，并做一些稍微復(fù)雜的數(shù)學(xué)運(yùn)算，但基于你已經(jīng)有的東西，這應(yīng)該是輕而易舉的。
另一個(gè)想法可能是只監(jiān)聽(tīng)resize事件，并根據(jù)新的可見(jiàn)大小進(jìn)行計(jì)算，但如果只是調(diào)整窗口大小，這可能會(huì)導(dǎo)致問(wèn)題。我認(rèn)為以上是你最好的選擇，如果必要的話，可能會(huì)有一個(gè)回退警告來(lái)警告用戶不要縮放。
我更新了代碼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();
}
});
});這個(gè)解決方案是跨平臺(tái)的(OS / Win ),適用于桌面瀏覽器。
下面的代碼可以防止所有類型的縮放與鼠標(biāo)，鍵盤手勢(shì)
document.addEventListener(
"wheel",
function touchHandler(e) {
if (e.ctrlKey) {
e.preventDefault();
}
}, { passive: false } );對(duì)于移動(dòng)設(shè)備，只需添加以下代碼行 & ltmeta name = ' viewport ' content = ' width = device-width，initial-scale=1，user-scalable=no，maximum-scale=1.0，shrink-to-fit = no ' & gt；
很簡(jiǎn)單:
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>你試過(guò)嗎...
$("body").css({
"-moz-transform":"scale(1)",
"-webkit-transform":"scale(1)",
"-o-transform":"scale(1)",
"-ms-transform":"scale(1)"
});我已經(jīng)使用這種類型的代碼來(lái)設(shè)置或重新設(shè)置規(guī)模。
通過(guò)鍵盤阻止瀏覽器縮放和上面很多答案一樣。
window.addEventListener('keydown', function (e) {
if ((e.ctrlKey || e.metaKey) && (e.which === 61 || e.which === 107 || e.which === 173 || e.which === 109 || e.which === 187 || e.which === 189)) {
e.preventDefault();
}
}, false);但防止縮放的鼠標(biāo)滾輪是不同的現(xiàn)代瀏覽器。 Chrome的新政策需要你顯式使用passive = false。
{passive: false}如果不是，event.preventDefault()無(wú)法停止默認(rèn)的動(dòng)作瀏覽器通過(guò)鼠標(biāo)滾輪縮放事件，檢查一下。
const handleWheel = function(e) {
if(e.ctrlKey || e.metaKey)
e.preventDefault();
};
window.addEventListener("wheel", handleWheel, {passive: false});但是我們不能阻止從瀏覽器菜單中點(diǎn)擊縮放。
剛剛在最新的Chrome上測(cè)試過(guò)，運(yùn)行良好。試一試。
window.addEventListener('wheel', e => {
if (e.ctrlKey) {
e.preventDefault();
}
}, { passive: false });嗯，我相信這將是最愚蠢的答案。但是如果你準(zhǔn)備使用暴力，你可以在px中設(shè)置你的DOM中的所有尺寸，這樣當(dāng)瀏覽器窗口調(diào)整大小或者網(wǎng)頁(yè)縮放時(shí)，你的所有尺寸保持不變。
雖然有一個(gè)問(wèn)題，如果當(dāng)窗口調(diào)整大小時(shí)尺寸沒(méi)有改變，它破壞了你的網(wǎng)站的響應(yīng)。為了防止這種情況，我相信你必須做大量的媒體查詢，以使網(wǎng)站逐步響應(yīng)。
運(yùn)籌學(xué)
你可以試著在px中保持body維度，然后對(duì)它的子體使用%。因此您只需在媒體查詢中更改正文尺寸。但這也意味著在媒體查詢之間，body元素會(huì)溢出。我不知道如何解決這個(gè)問(wèn)題
(業(yè)余在這里，只是tryna回答一些問(wèn)題，所以沒(méi)有仇恨。)
這將在chrome和safari上禁用它。我沒(méi)有在其他瀏覽器上測(cè)試過(guò) https://jsfiddle.net/gjqpLfht/
$(document).ready(function() {
$(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')) {
alert('disabling zooming');
event.preventDefault();
// 107 Num Key +
//109 Num Key -
//173 Min Key hyphen/underscor Hey
// 61 Plus key +/=
}
});
$(window).bind('mousewheel DOMMouseScroll', function(event) {
if (event.ctrlKey == true) {
alert('disabling zooming');
event.preventDefault();
}
});
});
document.addEventListener("gesturestart", function(e) {
e.preventDefault();
document.body.style.zoom = 0.99;
});
document.addEventListener("gesturechange", function(e) {
e.preventDefault();
document.body.style.zoom = 0.99;
});
document.addEventListener("gestureend", function(e) {
e.preventDefault();
document.body.style.zoom = 1;
});