Da das Front-End während der Entwicklung Standard-UI-Designzeichnungen verwendet, basieren diese grundsätzlich auf 1920 * 1080. Notebooks mit kleinem Bildschirm haben eine hohe Auflösung, sodass die Anzeigeelemente kleiner werden, sodass die Standardanzeige vieler Notebooks um 125 % oder größer ist 150 %.
Wenn die Seite relativ einfach ist, lassen Sie den zusätzlichen Leerraum einseitig erweitern, damit er nicht beeinträchtigt wird. Wenn die Seite jedoch mit anderen eingeführten Komponenten bedeckt ist, ist es schwierig, Position und Größe zu steuern.
Ich habe gesucht und festgestellt, dass das Bildschirmskalierungsverhältnis im Wesentlichen auf der Grundlage von window.screen.availHeight ermittelt wird.
window.screen.availHeight > 1000 bedeutet, dass die Skalierungsauswahl 100 % beträgt, andernfalls sind es 125 %, 150 % und auch Medienabfragen verwendet. , habe es direkt kopiert und ausprobiert, aber es hat überhaupt nicht funktioniert, aber lassen Sie mich erklären, das ist definitiv eine Lösung, aber ich habe es sorgfältig studiert. Das Gleiche gilt für andere Dinge, aber es hat danach keine Wirkung mehr es benutzen.
Ich dachte, dass das Anzeigegerät das Attribut devicePixelRatio haben sollte, also habe ich es ausgedruckt und gefunden, also habe ich nach den relevanten Informationen gesucht und direkt das devicePixelRatio erhalten. Da der
Bildschirm skaliert werden kann, kann 1/devicePixelRatio das Problem der Beliebigkeit direkt lösen Bildschirmskalierung. Der Inhalt ist wie folgt festgelegt:
Ich verwende Vue, also habe ich es unter app.vue hinzugefügt
export default {
name: 'App',
created () {
const devicePixelRatio = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5
if (devicePixelRatio !== 1) {
// 老ie可以提示
if (!! window.ActiveXObject || 'ActiveXObject' in window) {
alert('balabala,去用chrome吧')
} else {
const c = document.querySelector('body')
c.style.zoom = 1 / devicePixelRatio// 修改页面的缩放比例
}
}
}
}
Hinweis: Hierbei handelt es sich um eine willkürliche Skalierung des Bildschirms, nicht um eine willkürliche Skalierung des Browsers. Durch die Browserskalierung werden alle Inhalte gleichzeitig größer oder kleiner,
aber der Browser und der Bildschirm können sich gegenseitig neutralisieren. Beispiel: der Laptop-Bildschirm Methode ist 150 % , dann muss der Browser in der Lage sein, die Originalseite bei einer Vergrößerung um 2/3 anzuzeigen, da sie sich gemeinsam auf die Seitenelemente auswirken.
Wie lässt sich also der Browser beliebig skalieren und der Seiteninhalt automatisch an die Bildschirmgröße anpassen?
Obiger Code:
export default {
name: 'App',
created () {
this.$nextTick(() => {
this.resizeFun()
window.addEventListener('resize', this.resizeFun)
})
},
methods: {
resizeFun () {
const devicePixelRatio = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5
if (devicePixelRatio !== 1) {
// 如果在笔记本中用IE浏览器打开 则弹出提示
if (!! window.ActiveXObject || 'ActiveXObject' in window) {
alert('balabala。。。')
} else {
const c = document.querySelector('body')
c.style.zoom = 1 / devicePixelRatio// 修改页面的缩放比例
}
}
}
}
}
Diese Implementierungsmethode entspricht der Bindung der Resize-Methode an die Seite nach deren Erstellung. Die Methode resizeFun, die das Zoomverhältnis der Seite anpasst, wird bei jeder Änderung automatisch aufgerufen. Dadurch wird das Problem gelöst, dass der Seiteninhalt nicht verwirrt wird wenn der Browser oder die Seite gezoomt wird.