Java und Jquery erhalten Bildschirmauflösung

In der täglichen Arbeit ist der Implementierungsmodus zum Erhalten der Browserauflösung häufig auf das Front-End angewiesen, um gute Verarbeitungsergebnisse zu erzielen. Dies ist jedoch beispielsweise unvermeidlich, wenn die Länge chinesischer und englischer Zeichen durch ermittelt werden muss Auflösung zum Abfangen und Überprüfen. Es ist bequemer und zeitsparender, Logik im Hintergrund zu schreiben, sodass der Bedarf an Auflösung für die Hintergrundüberprüfung größer ist.

1. Java-Code zum Abrufen der Bildschirmauflösung

//类包使用为： java.awt.Toolkit
//屏幕分辨率宽度
int screenW = (int) Toolkit.getDefaultToolkit().getScreenSize().getWidth();
//屏幕分辨率高度
int screenH = (int) Toolkit.getDefaultToolkit().getScreenSize().getHeight();
//也可以进行方法封装公共调用
public int getScreenWidth(){
    return (int) Toolkit.getDefaultToolkit().getScreenSize().getWidth();
}
public int getScreenHeight(){
    return (int) Toolkit.getDefaultToolkit().getScreenSize().getHeight();
}
//在Java的UI设计中，前端需要居中展示dialog或Iframe内容时，可以通过以上模式获取分辨率进行居中展示
int screenWidth = (int) Toolkit.getDefaultToolkit().getScreenSize().getWidth();
int screenHeight = (int) Toolkit.getDefaultToolkit().getScreenSize().getHeight();
//类包使用为： javax.swing.JFrame
JFrame myFrame = new JFrame();
myFrame.setSize(500, 500)//设置frame的大小
myFrame.setLocation((screenWidth-500)/2, (screenHeight-500)/2);//设置frame显示在屏幕中央

2. JQuery zum Abrufen der Bildschirmauflösung Die gängigen Methoden sind wie folgt:

<script type="text/JavaScript"> 
$(document).ready(function(){ 
    alert($(window).height()); //浏览器当前窗口可视区域高度 
    alert($(document).height()); //浏览器当前窗口文档的高度 
    alert($(document.body).height());//浏览器当前窗口文档body的高度 
    alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
    alert($(window).width()); //浏览器当前窗口可视区域宽度 
    alert($(document).width());//浏览器当前窗口文档对象宽度 
    alert($(document.body).width());//浏览器当前窗口文档body的高度 
    alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin 
    alert(screen.height);//显示器分辨率，只能用JavaScript代码获 
    alert(screen.width); 
}) 
</script>

Die allgemeine Schreibmethode ist wie folgt und stimmt mit der oben genannten JS-Schreibmethode überein:

Die Breite des sichtbaren Bereichs der Webseite : document.body.clientWidth

Die Höhe des sichtbaren Bereichs der Webseite: document.body.clientHeight

Die Breite des sichtbaren Bereichs der Webseite: document .body.offsetWidth (einschließlich der Breite der Kante)

Die Höhe des sichtbaren Bereichs der Webseite: document.body.offsetHeight (einschließlich der Höhe der Kante)

Volltextbreite des Webseitenkörpers: document.body.scrollWidth

Volltexthöhe des Webseitenkörpers: document.body.scrollHeight

Höhe der gescrollten Webseite: document. body.scrollTop

Die linke Seite der Webseite, die gescrollt wird: document.body.scrollLeft

Im Hauptteil der Webseite: window.screenTop

Die linke Seite Seite des Hauptteils der Webseite: window.screenLeft

Bildschirmauflösung Die Höhe des Bildschirms: window.screen.height

Die Breite der Bildschirmauflösung: window.screen.width

Auf dem Bildschirm verfügbare Arbeitsbereichshöhe: window.screen.availHeight

Es ist nicht schwierig, die Methode zu erlernen. Der Trick besteht darin, sie häufiger zu verwenden und sich besser einzuprägen. Denn bei Nicht-H5-Browsern kommt es häufig vor, dass man sich mit Kompatibilitätsanwendungen beschäftigt.

Übrigens werde ich ein Attribut über den adaptiven Effekt von CSS3 erklären, nämlich die Verwendung von calc() in CSS3:

1. Die Syntax von calc() ist sehr einfach, wie ( ) , Minus (-), Multiplikation (*) und Division (/) verwenden mathematische Ausdrücke zum Ausdrücken;

　2. Beispielhöhe: calc(Ausdruck) Wobei „Ausdruck“ ein Ausdruck ist, der zur Berechnung der Länge verwendet wird des Ausdrucks Formel;

3. Die Operationsregeln von calc() verwenden mathematische Operationsregeln. Beachten Sie, dass vor und nach der Addition, Subtraktion, Multiplikation und Division Leerzeichen gelassen werden müssen, da sonst die Grammatik nicht streng ist.

4. Die calc()-Anwendung ist ein einzigartiges Attribut von CSS3 und verfügt daher über eine gute Kompatibilität mit aktuellen Mainstream-Browsern. Sie funktioniert jedoch nicht mit IE8 und niedriger. Es ist jedoch weiterhin erforderlich, die Anpassung vorzunehmen Auflösungsberechnung. Gewöhnen Sie sich daran.

5. Nehmen Sie ein Beispiel, um den Anwendungsmodus von calc() unten deutlich zu sehen

<body style="height: 100%;">
    <div id="header" style="height: 100px;"></div>
    <div id="main" style="height: calc(100% - 100px);"></div>
</body>

Wie aus dem obigen Beispiel ersichtlich ist, beträgt die gesamte Seitenhöhe 100 % , und die Header-Höhe beträgt 100 %. Die adaptive Höhe des Hauptkörperbereichs kann dann als Höhe geschrieben werden: calc(100 % - 100 px).

Das heißt, die Verwendung von 100 % der Seite minus 100 Pixel von der Höhe des Kopfes entspricht der Höhe des Hauptbereichs. Beachten Sie, dass vor und nach dem Symbol Leerzeichen vorhanden sein müssen.