目录
- 一:为什么会出现有这个问题?
- 二:有什么解决方案?
- 三:vue项目utils下新建js
- 四:全局导入App.vue
- 五:重新进入项目
- 六:注意事项
一:为什么会出现有这个问题?
- 因为现在很多14寸的笔记本,出厂默认就是150%的显示。导致很多时候我们的项目,自己开发的时候都是按照100%比例来开发的,上线了就会发现这个问题。
二:有什么解决方案?
- 1.REM行不行?
- 2.vw行不行
- 3.百分比行不行?
都试过了,都没办法统一,所以有现在这个方案。
三:vue项目utils下新建js
- 1.文件名
devicePixelRatio.js
class DevicePixelRatio {
constructor() {
}
_getSystem() {
let flag = false;
var agent = navigator.userAgent.toLowerCase();
if (agent.indexOf('windows') >= 0) {
return true;
}
}
_addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
}
_correct() {
let t = this;
document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;
}
_watch() {
let t = this;
t._addHandler(window, 'resize', function() {
t._correct()
})
}
init() {
let t = this;
if (t._getSystem()) {
t._correct();
t._watch();
}
}
}
export default DevicePixelRatio;
四:全局导入App.vue
<script>
import DevicePixelRatio from './utils/devicePixelRatio'
export default {
name: 'App',
data() {
return {
}
},
created() {
new DevicePixelRatio().init()
}
}
</script>
五:重新进入项目
发现不管怎么缩放,125%还是150%,页面都不会去缩放了,就不会出现错乱的问题了
六:注意事项
没有做兼容mac系统噢
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)