禁止浏览器缩放页面

PC端实现

<script>
var t = window.devicePixelRatio
document.body.style.zoom = 1 / t

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>

Chrome、Firefox、Edge、360浏览器、QQ浏览器亲测有效

移动端实现

<meta name="viewport"
      content="width=device-width,
      initial-scale=1.0,
      maximum-scale=1.0,
      minimum-scale=1.0,
      user-scalable=no,
      target-densitydpi=device-dpi"
/>

参数说明：

width - viewport的宽度

height - viewport的高度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

target-densitydpi - 按照图片真实尺寸进行展示   

说明：如果一张320*480的图片，放在iphone4里面，默认是满屏的，但如果定义了target-densitydpi=device-dpi，name图片只占屏幕四分之一，因为iphone4的分辨率是640*960