親測有效
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>瀏覽器網頁內容的百分比縮放（按ctrl - | ctrl + | ctrl +滾輪鍵的縮放）</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>我是內容我是內容我是內容我是內容我是內容，，，禁止頁面內容滾動（ 禁用 ctrl - | ctrl + | ctrl +滾輪 事件 ）</div>
</body>
</html>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// //方法一
// 判斷pc瀏覽器是否縮放，若返回100則為默認無縮放，如果大於100則是放大，否則縮小
function detectZoom (){
var ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
}
else if (~ua.indexOf('msie')) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
}
else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio){
ratio = Math.round(ratio * 100);
}
console.log(window.devicePixelRatio, 123)
return ratio;
};
// window.onresize 事件可用於檢測頁面是否觸發了放大或縮小。
window.addEventListener('resize', function() {
isScale();
})
isScale();
//判斷PC端瀏覽器縮放比例不是100%時的情況
function isScale(){
var rate = detectZoom(),
isMac = /macintosh|mac os x/i.test(navigator.userAgent); // Mac默認縮放值為200，windows默認為100，需要分開判斷
if((isMac && rate !== 200) || (!isMac && rate !== 100)){
//如何讓頁面的縮放比例自動為100,'transform':'scale(1,1)'沒有用，又無法自動條用鍵盤事件，目前只能提示讓用戶如果想使用100%的比例手動去觸發按ctrl+0
// alert('當前頁面不是100%顯示，請按鍵盤ctrl/command + 0恢復100%顯示標准，以防頁面顯示錯亂！')
}
}
// 阻止pc端瀏覽器縮放js代碼
// 由於瀏覽器菜單欄屬於系統軟件權限，沒發控制，我們着手解決ctrl/cammond + +/- 或 Windows下ctrl + 滾輪 縮放頁面的情況，只能通過js來控制了
document.addEventListener('DOMContentLoaded', function (event) {
// chrome 瀏覽器直接加上下面這個樣式就行了，但是ff不識別
document.body.style.zoom = 'reset';
document.addEventListener('keydown', function (event) {
if ((event.ctrlKey === true || event.metaKey === true)
&& (event.which === 61 || event.which === 107
|| event.which === 173 || event.which === 109
|| event.which === 187 || event.which === 189))
{
event.preventDefault();
}
}, false);
var scrollFunc = function (event) {
event = event || window.event;
if (event.wheelDelta) { //判斷瀏覽器IE，谷歌滑輪事件
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault();
}
}
};
//給頁面綁定滑輪滾動事件
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滾動滑輪觸發scrollFunc方法
window.onmousewheel = document.onmousewheel = scrollFunc;
}, false);
//方法二
document.addEventListener('keydown', function (event) {
if ((event.ctrlKey === true || event.metaKey === true)
&& (event.which === 61 || event.which === 107
|| event.which === 173 || event.which === 109
|| event.which === 187 || event.which === 189)) {
event.preventDefault();
}
}, false);
// Chrome IE 360
window.addEventListener('mousewheel', function (event) {
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault();
}
}, { passive: false });
//firefox
window.addEventListener('DOMMouseScroll', function (event) {
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault();
}
}, { passive: false });
</script>