由于前端在开发时使用的都是标准ui设计图，基本都是按照所以1920*1080， 而小屏幕笔记本由于分辨率高，所以导致的显示元素变小，因此很多笔记本的默认显示都是放大125%或者150%。

如果页面比较简单就让多余的空白单边扩展，这样可以不受影响，但是如果页面遍布了引入的其他组件，就不好控制位置和大小了。

我去搜了一下，基本都是根据 window.screen.availHeight 来获取屏幕缩放比例，

window.screen.availHeight > 1000 说明缩放选择的是100%，否则是125%、150%, 还有使用媒体查询的，直接拷贝过去试了一下一点用没有，但是我说明一下，这个肯定是一种解决方式，只是我仔细去研究，其他的同理，用了一下没有效果，

想着显示设备应该都有devicePixelRatio这个属性把，于是打印了一下还真有，就去搜了相关，直接获取devicePixelRatio

，因为屏幕是可以缩放的，所以直接 1/devicePixelRatio就可以解决屏幕任意缩放了而现实内容固定了，如下：

我用的是vue，所以我把它加在了app.vue下的

<code>export default {

name: 'App',

created () {

const devicePixelRatio = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5

if (devicePixelRatio !== 1) {

// 老ie可以提示

if (!! window.ActiveXObject || 'ActiveXObject' in window) {

alert('balabala,去用chrome吧')

} else {

const c = document.querySelector('body')

c.style.zoom = 1 / devicePixelRatio// 修改页面的缩放比例

}

}

}

}

备注：这里是屏幕任意缩放，不能是浏览器任意缩放，浏览器缩放会导致所有内容同时变大或变小，

但是浏览器和屏幕是可以互相中和的，举个例子，笔记本屏幕方法150%，那么浏览器一定是缩放2/3时可以显示原始的页面，因为他们共同影响页面元素的。

那么如何实现浏览器随意缩放，而页面内容自动适应屏幕大小呢？

上代码：

export default {

name: 'App',

created () {

this.$nextTick(() => {

this.resizeFun()

window.addEventListener('resize', this.resizeFun)

})

},

methods: {

resizeFun () {

const devicePixelRatio = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5

if (devicePixelRatio !== 1) {

// 如果在笔记本中用IE浏览器打开 则弹出提示

if (!! window.ActiveXObject || 'ActiveXObject' in window) {

alert('balabala。。。')

} else {

const c = document.querySelector('body')

c.style.zoom = 1 / devicePixelRatio// 修改页面的缩放比例

}

}

}

}

}

这种实现方式相当于在页面创建后就给他bind了resize的方法，每次变更时自动调用调整页面缩放比例的方法resizeFun， 这样就解决了缩放浏览器或者页面时页面内容不会错乱问题