Die ultimative Lösung zur Selbstanpassung von Webseiten unter dem Fenstersystem
Artikelverzeichnis
Vorwort
Viele Anfänger werden bei der Entwicklung von Webseiten immer auf einen großen „Tumor“ stoßen - Windows (wirklich der größte Schurke der Welt). 125%, 150% Skalierungsfenster, das zusätzlich zur künstlichen Schaltflächenskalierung eine Skalierung der Webseite bewirkt .) Es wird immer verwirrend sein.
1. Die Kernidee?
Entwickler können niemals Entscheidungen im Namen von Benutzern treffen. Daher wird nach einer Änderung der Seite „devicePixelRatio“ die Größe des Seitenkörper-Tag-Zooms berechnet, um die durch „devicePixelRatio“ verursachten Änderungen auszugleichen.
2. Verwenden Sie Schritte
1. Schreiben der DevicePixelRatio-Toolklasse
Code wie folgt anzeigen:
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. Praktische Anwendung
Rufen Sie nach dem Hinzufügen der Tool-Klasse diese Methode in der App.vue-Datei auf (Dateien, in denen andere Frameworks global sind):
// 引入文件（常识...）
import DevicePixelRatio from './utils/devicePixelRatio' // 路径就不要复制了...
// 初始化调用
created() {
new DevicePixelRatio().init()
},
Zusammenfassen
Nach den oben genannten einfachen Vorgängen können die meisten durch das Skalierungsverhältnis verursachten Anpassungsprobleme gelöst werden. Mit dem adaptiven Zoom innerhalb der Seite ist der Effekt natürlich besser!