等比例缩放页面+根据滚动显示模块 methods: { resize() { var fullWidth = document.documentElement.clientWidth var s; s = fullWidth / 1920; console.log(s) document.body.style.zoom = s; }
},
created(){
window.addEventListener('resize', this.resize)
},
mounted: function () {
this.resize()
window.addEventListener('scroll', () => {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// console.log(scrollTop)
if (scrollTop > 100) {
this.kgshow = true
} else {
this.kgshow = false
}
}, true)
},
beforeDestroy: function () {
window.removeEventListener('resize', this.resize)
},
destroyed() {
window.removeEventListener('scroll', this.btn_pos)
},
<!-- 视图窗口，移动端特属的标签。 -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-
scalable=no" /> <!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置。apple-mobile-web-app-capable 支持苹果移动网络应
用-apple-mobile-web-app-status-bar-style 状态栏样式--> <meta name="format-detection"content="telephone=no, email=no" />
有些浏览器是强制开启允许缩放的，例如QQ浏览器，
对于双击放大和双指放大，js禁止的方式，代码如下
禁止双指放大 document.documentElement.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }, false);
禁止双击放大 var lastTouchEnd = 0; document.documentElement.addEventListener('touchend', function (event) { var now = Date.now(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now; }, false);
