vue 分辨率适配,vue页面与屏幕分辨率

在考虑笔记本或者显示器默认设置125%或者150%缩放，导致布局错乱的解决方法

一、为什么会出现有这个问题？因为现在很多14寸的笔记本，出厂默认就是150%的显示。导致很多时候我们的项目，自己开发的时候都是按照100%比例来开发的，上线了就会发现这个问题。二、使用以下方法

vue项目util下新建js

1、文件名devicePixelRatio.js

class DevicePixelRatio { constructor() { // this.flag = false; } // 获取系统类型 _getSystem() { // let flag = false; var agent = navigator.userAgent.toLowerCase(); //var isMac = /macintosh|mac os x/i.test(navigator.userAgent); //if(isMac) { //return false; //} // 现只针对windows处理，其它系统暂无该情况，如有，继续在此添加 if (agent.indexOf('windows') >= 0) { return true; } } // 获取页面缩放比例 //_getDevicePixelRatio() { //let t = this; //} // 监听方法兼容写法 _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; // 页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。 document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio; } // 监听页面缩放 _watch() { let t = this; t._addHandler(window, 'resize', function() { // 注意这个方法是解决全局有两个window.resize // 重新校正 t._correct() }) } // 初始化页面比例 init() { let t = this; if (t._getSystem()) { // 判断设备，目前只在windows系统下校正浏览器缩放比例 // 初始化页面校正浏览器缩放比例 t._correct(); // 开启监听页面缩放 t._watch(); } }}export default DevicePixelRatio;2、全局导入App.vue3、刷新页面

发现不管怎么缩放，125%还是150%，页面都不会去缩放了，就不会出现错乱的问题了

注意事项：

没有做 mac 兼容

vue 分辨率适配,vue页面与屏幕分辨率

笔记：轮播图大小随不同分辨率电脑等比例放大缩小（vue）

首先需要知道如何获取屏幕的宽高

对于1920*1080的电脑屏幕

1、获取窗口中的文档显示区域宽高
w = window.innerWidth; //1920（包含滚动条）
h = window.innerHeight; //883（不核禅含工具条）

2、获取窗口（包括滚动条与工具条）区域宽高
w = window.outerWidth; //1920（包含滚动条）
h = window.outerHeight; //883（包含工具条）

3、获取网页可见区域宽高
clientw = document.body.clientWidth; //1903（不包含滚动条）
clienth = document.body.clientHeight; //866（不包含工具条）

4、获取网页可见（含边线，但不是边距）区域宽高
clientw = document.body.offsetWidth; //1903（不包含滚动条，含边线）
clienth = document.body.offsetHeight; //866（不包含工具条，含边线）

5、网页正文全文宽高
clientw = document.body.scrollWidth; //锋氏仔1903（不含滚动条）
clienth = document.body.scrollHeight; //1269（不含工具条）
所谓正文全文，实际就是整个网页文档的宽高银汪，既然是整个网页文档宽高肯定就是，网页内容有多宽那个宽就是多少，网页内容有多高那高就是多少了，当然同样包含着边线

6、屏窗
所谓屏窗就是整个屏幕窗口，我们前面说的到都属于视窗，也就是可视区域的窗口

获取屏窗一般使用：

clientw = window.screen.width; //1920
clienth = window.screen.height; //1080

第二种是获取屏幕可用工作去宽高

clientw = window.screen.availWidth; //1920
clienth = window.screen.availHeight; //1040

原文链接： http://www.cnblogs.com/leona-d/p/6347013.html

接下来说说轮播，html部分动态绑定高度，至于样式就宽度100%就好

在mounted时期调用方法，因为mounted才可以操作DOM，监听窗口变化

//这个3.84的比例是按照1920*500的轮播来的，即1920/500

vue 分辨率适配,vue页面与屏幕分辨率

antdesignvue手机怎么适配

1. 使用媒体查肢芦派询，在样式文件中添加媒体查询，根据不同的设备宽度设置不同的样式；
2. 使用flexible.js，自动根据设备宽度调整根元素的font-size，从而实现移动历贺端适配；
3. 使用vw单位，将哗橘元素的宽度和高度设置为vw单位，从而实现移动端适配；
4. 使用lib-flexible，自动根据设备宽度调整根元素的font-size，从而实现移动端适配。