解决window系统下网页自适应的终极方法

文章目录

解决window系统下网页自适应的终极方法
前言
一、核心思想？
二、使用步骤
- 1.DevicePixelRatio工具类编写
- 2.实际应用
总结

前言

很多新手在开发网页的过程中总会遇到一大“毒瘤”–Windows（真是世界第一大流氓）不管你页面写的多规整，在windows的“英明指导下”（windows系统经常推荐用户使用125%、150%比例的缩放窗口，这样导致web页面被进行缩放，除此之外还有人为的按钮缩放。）总会变得混乱不堪。

一、核心思想？

开发人员永远无法替代用户做出决策，因此，在页面devicePixelRatio变化后，通过计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。

二、使用步骤

1.DevicePixelRatio工具类编写

代码如下：

class DevicePixelRatio {//获取系统类型_getSystem() {var agent = navigator.userAgent.toLowerCase();//现只针对windows处理，其它系统暂无该情况，如有，继续在此添加if(agent.indexOf("windows") >= 0) {return true;}else {return false}}//监听方法兼容写法_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() {//页面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.vue文件中（其他框架在全局的文件）调用该方法：

// 引入文件（常识...）
import DevicePixelRatio from './utils/devicePixelRatio' // 路径就不要复制了...
// 初始化调用
created() {new DevicePixelRatio().init()
},

总结

经过上述简单的操作，即可解决大部分的因为缩放比带来的适配问题。当然配合页面内部的自适应缩放使用，效果更佳！

解决Windows系统下网页自适应的终极方法相关推荐

点计算机没有本地磁盘,快速解决WinPE系统下没有本地磁盘的方法
最近,有不少朋友表示,进入WinPE系统后打开我的电脑,找不到本地磁盘,怎么办?PE系统下识别不了硬盘还是被隐藏了?今天U大侠小编跟大家一起讨论WinPE系统里面找不到硬盘的解决方案! WinPE系统 ...
【杂谈】解决Windows系统下上传速度慢的一个小技巧
这两天郁闷了,硬盘坏了,里面的东西找不回来,毕业设计只能重做,然而重做就重做吧,吸取教训把项目放网盘里,结果TM还上传不上去,真是够了,几经波折折腾到个方法,记录分享一下,这个方法WIN7&W ...
解决windows系统下打开应用弹出丢失libmysql.dll的问题
只要把下载libmysql.dll,放到exe应用程序的所在目录,就可以运行,libmysql.dll有32位和64位版本,可以分别测试一下行不行,如果不行在换一个版本试试.libmysql.dll ...
解决windows系统下dos显示中文乱码
1.进入dos ,输入chcp,查看当前支持的编码 2.输入命令:chcp 65001,在输入chcp的时候就显示目前支持的是utf-8 3.设置字体 4. 参考博客:点这里转载于:https:// ...
解决windows系统下8080端口被占用
1.win+R:输入cmd,回车输入指令:netstat -ano | findstr 8080 指令的意思是找出占用8080端口的进程pid 2. 此时找到8080端口号的pid是11 ...
windows系统下设置mtu值的方法
说起 MTU 值,可能许多朋友连听都没听说过.简单来说,我们上网时所进行的操作,都是通过传输一个又一个"数据包"来实现的,而 MTU 值就是用来设定可传输数据包的最大尺寸的.很显然 ...
windows系统下文件批量重命名方法
选中要重命名的文件(ctrl+A或者其他方法),单击鼠标右键,选择复制文件地址: 新建一个Excel文档,然后在A1框进行粘贴: 在B1框输入待改名的文件名,然后 Ctrl+E,然后会在B列自动智能填 ...
windows系统下搭建 ZeroTier moon服务器
ZeroTier 是一个虚拟局域网软件,局域网内的机器,流量不走公网,降低了风险和费用.而且软件开源,同一子网下免费使用100个机器,然而在国内如果要用好ZeroTier,最好搭建MOON转发服务器. ...
php ttf 字体 url,window_TTF字体文件如何安装 TTF文件打不开解决方法，TTF文件是Windows系统下的字体文 - phpStudy...
TTF字体文件如何安装 TTF文件打不开解决方法 TTF文件是Windows系统下的字体文件,可通过系统自带的字体安装程序直接安装添加字体,比如常用的"仿宋_GB2312"字体就可 ...

解决Windows系统下网页自适应的终极方法