So ändern Sie Javascript entsprechend der Seitengröße

JavaScript ist eine Programmiersprache, die häufig für die Interaktivität auf Webseiten verwendet wird. Bei der Entwicklung von Webseiten müssen wir häufig die Art und Weise ändern, wie Webinhalte basierend auf der Seitengröße angezeigt werden. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript das Layout und den Stil von Webseitenelementen entsprechend der Seitengröße ändern.

1. Ermitteln Sie die Seitengröße

Zunächst müssen wir die Seitengröße ermitteln. Sie können den folgenden Code verwenden, um die Breite und Höhe der Seite zu ermitteln:

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;

Hier werden die Eigenschaften innerWidth und innerHeight des Fensterobjekts verwendet, die die sichtbare Breite bzw. Höhe der Seite darstellen. Es ist zu beachten, dass die mit dieser Methode ermittelte Seitengröße durch Browser-Symbolleisten und Bildlaufleisten beeinflusst werden kann.

Wenn Sie die tatsächliche Breite und Höhe des Webseiteninhalts erhalten möchten, können Sie den folgenden Code verwenden:

var pageWidth = document.documentElement.scrollWidth;
var pageHeight = document.documentElement.scrollHeight;

Hier werden die Eigenschaften scrollWidth und scrollHeight des Dokumentobjekts verwendet, die die tatsächliche Breite und Höhe des Dokumentobjekts darstellen Webseiteninhalt, einschließlich des unsichtbaren Teils. Es ist zu beachten, dass die tatsächliche Breite und Höhe möglicherweise kleiner als der sichtbare Teil ist, wenn die Webseite nicht über genügend Inhalt verfügt.

2. Ändern Sie den Webinhalt basierend auf der Seitengröße.

Nachdem wir die Seitengröße ermittelt haben, können wir den Webinhalt basierend auf der Seitengröße dynamisch ändern. Im Folgenden sind einige häufige Anwendungsszenarien aufgeführt:

1. Ändern des Webseitenlayouts entsprechend der Seitenbreite

Auf der mobilen Seite ändern wir normalerweise das Layout der Seite in ein vertikales Layout, um es an die vertikale Anzeige des Mobiltelefons anzupassen Telefonbildschirm. Auf dem Desktop verwenden wir normalerweise ein horizontales Layout. Der folgende Code kann verschiedene Layouts basierend auf der Seitenbreite auswählen:

if (pageWidth < 768) {
  // 移动端布局
  // ...
} else {
  // 桌面端布局
  // ...
}

Dieser Code nutzt die Idee der Medienabfrage, um verschiedene Layoutmethoden auszuwählen, indem er die Seitenbreite beurteilt. Der entsprechende Layoutcode kann in die if-Anweisung geschrieben werden.

2. Ändern Sie die Schriftgröße der Webseite entsprechend der Seitenbreite.

Auf der mobilen Seite muss die Schriftgröße der Webseite aufgrund des kleineren Mobiltelefonbildschirms entsprechend reduziert werden, um das Lesen für den Benutzer zu erleichtern. Der folgende Code kann die Schriftgröße der Webseite automatisch entsprechend der Seitenbreite anpassen:

if (pageWidth < 768) {
  // 移动端字体大小
  document.body.style.fontSize = "14px";
} else {
  // 桌面端字体大小
  document.body.style.fontSize = "16px";
}

Dieser Code verwendet das Stilattribut des Dokumentobjekts, um den CSS-Stil auf der Webseite festzulegen. Verwenden Sie if-Anweisungen, um je nach Seitenbreite unterschiedliche Schriftgrößen auszuwählen.

3. Ändern Sie die Position von Webseitenelementen entsprechend der Seitenhöhe.

Bei einigen Webseiten, die gescrollt werden müssen, können wir die Position von Webseitenelementen entsprechend der Seitenhöhe steuern. Sie können beispielsweise eine Schaltfläche „Zurück nach oben“ anzeigen lassen, wenn Sie nach unten scrollen. Der folgende Code kann diese Funktion erreichen:

window.onscroll = function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > pageHeight * 0.8) {
    // 显示“返回顶部”按钮
    document.getElementById("back-to-top").style.display = "block";
  } else {
    // 隐藏“返回顶部”按钮
    document.getElementById("back-to-top").style.display = "none";
  }
}

Dieser Code verwendet das Onscroll-Ereignis des Fensterobjekts, das beim Scrollen der Webseite den entsprechenden Code auslösen kann. Durch Berechnen der Scroll-Distanz scrollTop können Sie feststellen, ob bis zum Ende der Seite gescrollt wurde. Wenn die Scrolldistanz 80 % der Seitenhöhe überschreitet, wird die Schaltfläche „Zurück nach oben“ angezeigt, andernfalls wird sie ausgeblendet.

3. Zusammenfassung

JavaScript ist eines der gängigen Tools zum Entwickeln dynamischer Webseiten. Wenn wir den Inhalt einer Webseite entsprechend der Seitengröße ändern, können wir JavaScript verwenden, um die Seitengröße zu ermitteln und das Layout, den Stil und die Position der Webseitenelemente entsprechend der Seitengröße dynamisch zu ändern. Durch den flexiblen Einsatz von JavaScript-Skripten können Webseiten auf unterschiedlichen Geräten und Bildschirmgrößen gut dargestellt werden und so das Benutzererlebnis verbessern.

Das obige ist der detaillierte Inhalt vonSo ändern Sie Javascript entsprechend der Seitengröße. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!