suchen

Heim >tägliche Programmierung >HTML-Kenntnisse >So bestimmen Sie die Bildschirmgröße in JS

So bestimmen Sie die Bildschirmgröße in JS

藏色散人
藏色散人Original
2018-12-18 16:30:3318022Durchsuche


Verwenden Sie JS, um die aktuelle Bildschirmgröße zu bestimmen. Wir können die Methode Window matchMedia() verwenden, um das angegebene Größenelement abzugleichen, und es dann anhand der aktuellen beurteilen Bildschirmgröße.

So bestimmen Sie die Bildschirmgröße in JS

Nachfolgend stellen wir Ihnen anhand einfacher Codebeispiele die Methode von JS zur Ermittlung der aktuellen Bildschirmgröße vor.

Das Codebeispiel lautet wie folgt: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS判断屏幕大小示例</title>

</head>
<body>
<script>
 if(window.matchMedia("(max-width: 767px)").matches){
        document.write("这是一个移动设备。");
 }else {
        document.write("这是平板电脑或台式电脑。");
 }
</script>
</body>
</html>

Hier schreiben wir über die matchMedia-Methode eine Bildschirmgrößenbeurteilung, die der angegebenen maximalen Breitengröße (767 Pixel) entspricht. Wenn der erhaltene aktuelle Bildschirm, also die Fenstergröße, weniger als 767 Pixel beträgt, wird festgestellt, dass es sich um ein mobiles Gerät handelt. Im Gegenteil, wenn es größer als 767 Pixel ist, wird es als „das ist ein Tablet oder Desktop-Computer“ beurteilt.

Die Beurteilungsergebnisse lauten wie folgt:

Wenn die aktuelle Bildschirmbreite größer als 767 Pixel ist:

So bestimmen Sie die Bildschirmgröße in JS

Wenn die aktuelle Die Bildschirmbreite beträgt weniger als 767 Pixel:

So bestimmen Sie die Bildschirmgröße in JS

matchMedia() Gibt ein neues MediaQueryList-Objekt zurück, das das analysierte Ergebnis der angegebenen Medienabfragezeichenfolge darstellt. Der Wert der matchMedia()-Methode kann ein beliebiges Merkmal der CSS-@media-Regel sein, wie z. B. Mindesthöhe, Mindestbreite, Ausrichtung usw.

MediaQueryList-Objekt hat die folgenden zwei Attribute:

media: der Inhalt der Abfrageanweisung.

Übereinstimmungen: Wird zum Erkennen von Abfrageergebnissen verwendet. Wenn das Dokument mit der Medienabfrageliste übereinstimmt, ist der Wert wahr, andernfalls ist er falsch.

Dieser Artikel ist eine Einführung in die JS-Methode zur Bestimmung der Bildschirmgröße. Er ist einfach und leicht zu verstehen. Ich hoffe, er wird für Freunde in Not hilfreich sein.


Das obige ist der detaillierte Inhalt vonSo bestimmen Sie die Bildschirmgröße in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So löschen Sie HTML-Attribute in JQueryNächster Artikel：So löschen Sie HTML-Attribute in JQuery

In Verbindung stehende Artikel

Mehr sehen