解决网站等比缩放

需求了解

• 场景：写完pc端boss希望移动端可以适应
• 设备：移动端/pc端

知识点了解

下面这张图可以直观的展示html viewport特点：使页面适应窗口宽度。

• 添加了viewport

• 注销了viewport

聪明绝顶的的小伙伴们肯定会发现单靠viewport,肯定也实现不了页面等比缩放的。因为上面的网页字体大小并未更改，所以就算它再怎么努力也很难实现等比缩放，所以想要实现等比缩放，还得与下面的js相结合

解决步骤

1. 找到项目public文件夹中的html

2. 找到下面代码，注释掉

   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   

3. js代码

   src\util\devicePixelRatio.js

class DevicePixelRatio {
	constructor() {
		//this.flag = false;
	}
	//获取系统类型
	_getSystem() {
		let flag = false;
		var agent = navigator.userAgent.toLowerCase();
		//现只针对windows处理，其它系统暂无该情况，如有，继续在此添加
		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;
		//页面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;

接下来就是在src\App.vue中引用了，酱紫就完成啦，详细注释都有

<script>
import DevicePixelRatio from '@/util/devicePixelRatio.js';
export default {
  name: "App",
  mounted() {
    resizeWeb();
    window.addEventListener("resize", () => {
      resizeWeb();
    });

    function resizeWeb() {
      var wH = window.innerHeight; // 当前窗口的高度
      var wW = window.innerWidth; // 当前窗口的宽度
      var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
      var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
      if (wW > 920) {
        var html = document.documentElement;
        html.style.fontSize = rem + "px"; //适用于PC网站
      }
    }
    new DevicePixelRatio().init();
  },
  methods: {
    activeChange(num){
      this.activeNav = num;
    }
  }
};
</script>