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