前言
-
在台式机上开发pc端项目时，由于是1920*1080的分辨路和100缩放，看起来是没有问题。在笔记本上有问题
-
因为现在很多14寸的笔记本，出厂默认就是125%或150%的显示。导致很多时候我们的项目，自己开发的时候都是按照100%比例来开发的，上线了就会发现这个问题。
-
网上有很多解决方案，但都是治标不治本，表面上是适配了，但是有很多坑。效果不是很好。
-
比如布局挤变形了，第三方组件变形，按钮错位，部分白屏，执行不了。看着很不舒服。
网上解决方案-可以先试一下看效果
vue项目下，笔记本显示跟PC显示比例为125%、150%对页面造成的影响_一起搞前端的博客-CSDN博客
解决前端页面在笔记本和台式显示器比例大小不一问题（适配笔记本125% 150%缩放解决方法）_@小匠的博客-CSDN博客_笔记本设置了缩放,前端如何适配
禁止web页面缩放解决方案 - 掘金
笔记本默认设置125%或者150%缩放，导致布局错乱的解决方法 - 孙凯亮 - 博客园
我的解决方案-思路
1.笔记本缩放（125%或150%）本质是看起来舒服，但实际是更改了视口大小--就是要适配不同分辨率屏幕
2.尽量使用100%布局，这样不管视口分辨路怎么变都是从100里面分，不会受到影响
3.行内样式不会生效，像element-ui表格设置height如果是px就会把页面撑变形，改成父元素的%比（比如50%）
4.如果项目中有使用canvas或者别的相关技术，就要在这个页面监听浏览器是否缩放，来改变大小。
5.最后直接把屏幕在设置中调成125%或150%，来看效果，直接适配
实现
1.适配不同分辨率屏幕--主页文章有[Vue pc端适配不同分辨率屏幕]
2.根据实际情况，编写样式
3.修改表格之内的行高(height="70%") 父级元素要设置高，要不然没效果
<el-table
:data="tableData"
height="70%"
border
style="width: 100%; margin: 20px 0 30px"
size="mini"
>4.在有用到canvas技术的页面监听浏览器缩放，条件成立就是浏览器缩放，给他开关打开，改变canvas大小
return {
// 笔记本开关
windowlen: false,
// 监听是否在笔记本上-监听浏览器
screenWidth: document.body.clientWidth,
}
watch: {
// 监听是否在笔记本上-监听浏览器
screenWidth: {
immediate: true,
handler: function (newVal) {
console.log('浏览器大小', newVal)
if (newVal != 1920) {
console.log('执行了', newVal != 1980)
this.windowlen = true
}
}
}
},
mounted() {
// 监听是否在笔记本上-监听浏览器
const that = this
window.onresize = () => {
return () => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
}
}
},
beforeDestroy() {
// 离开页面是清空
this.windowlen = false
},
// 判断笔记本上运行
if (this.windowlen) {
console.log('笔记本浏览', this.windowlen)
// 注意不要加px
this.canvas.width = 780
this.canvas.height = 435
}5.把屏幕调成125%缩放，完成其他细节。150%缩放同理。
总结：
经过这一趟流程下来相信你也对 vue 项目适配笔记本1920*1080 125%缩放 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！
什么不足的地方请大家指出谢谢 -- 風过无痕
