手机端:
只需要在标签中里面加上即可,代码如下所示:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
PC端用户可以通过如下几种方式来缩放:
- ctrl + +/-
- ctrl + 滚轮
- 浏览器菜单栏
由于浏览器菜单栏属于系统软件权限,没办法控制,所以只能着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况
PC端需要通过js来进行控制,代码如下所示:
// 禁止通过 ctrl + +/- 和 ctrl + 滚轮 对页面进行缩放
disableBrowserZoom = () => {
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
})
}