Können Sie mir sagen, wie man ein HTML-Layout automatisch an die Bildschirmauflösung anpasst? Beispiel: Ich kodiere HTML mit einer Bildschirmauflösung von 1024 x 768 Pixeln. Wenn ich zu 800 x 600 Pixel wechsle, möchte ich, dass mein HTML-Fenster automatisch geändert wird, um den Bildschirm anzupassen.
Wie könnte ich das tun?
Unter HTML-Fenster Ich gehe davon aus, dass Sie den HTML-Inhalt und nicht das Browserfenster meinen.
Wenn dies der Fall ist, lauten die Schlüsselwörter für das, was Sie tun wollen liquid/fluid/elastic design .
Sie möchten vielleicht lesen Elastisches Design von Patrick Griffiths en Eine eigene Liste Website, oder Suchen Sie bei Google nach "liquid design .
Sie müssen kein Javascript verwenden. Setzen Sie einfach die Breite Ihres Elements (div, Tabelle usw.) in der CSS-Datei auf 100%. Dann wird es sich entsprechend der Breite des Viewports anpassen. (Das Gleiche gilt für die Höhe)
<!-- in yourHtml.html file -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="yourStyleSheet.css" />
</head>
<body>
<div class="fullWidth">
Your content
</div>
</body>
</html>
<!-- in yourStyleSheet.css file -->
div.fullWidth {
width:100%;
height:100%;
background-color:#CCC;
}
Wenn Sie das tatsächliche Browserfenster meinen, hat Javascript screen.width und screen.height, die die aktuelle Auflösung zurückgeben; siehe Anwendungsbeispiele . Auf einer bestimmten Webseite könnten Sie ein Skript so einstellen, dass es zeitgesteuert prüft, ob sich diese Werte geändert haben, und gegebenenfalls die Größe des Fensters ändert. Dies scheint jedoch eine merkwürdige Leistung zu sein - Bildschirmauflösungen ändern sich nur sehr selten, und Sie müssten sich auf der Seite befinden, die dieses JS-Skript enthält, damit es funktioniert. Beachten Sie auch, dass die Eigenschaften Breite und Höhe nicht berücksichtigen, wo sich die Symbolleisten befinden, so dass das Fenster dahinter verschwinden könnte. Dies ist ebenfalls ein schlechtes Verhalten, da die automatische Maximierung die Wünsche des Benutzers außer Acht lässt.
Ihre Frage ist vage, daher versuche ich, Ihnen mit einigen Beispielen zu helfen, die mit Ihrem Problem in Zusammenhang stehen könnten.
Wenn Sie die Größe des Browserfensters mit JavaScript ermitteln möchten, finden Sie hier ein Beispiel:
function getClientSize() {
var width = 0, height = 0;
if(typeof(window.innerWidth) == 'number') {
width = window.innerWidth;
height = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
width = document.body.clientWidth;
height = document.body.clientHeight;
}
return {width: width, height: height};
}Um die Größenänderung des Browserfensters programmatisch zu erkennen, fügen Sie dem Ereignis window.onresize einen Listener hinzu. Beachten Sie, dass es im folgenden vereinfachten Beispiel keine Rolle spielt, ob bereits ein Listener angehängt ist (verwenden Sie stattdessen addEventListener/attachEvent):
window.onresize = function() {
var size = getClientSize();
alert("Width: " + size.width + ", Height: " + size.height);
} CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
0 Stimmen
Ich bin mir nicht sicher, ob ich die Frage verstehe. Fragen Sie danach, wie man einen Browser dazu bringen kann, die Größe seiner Fenster automatisch an die maximale Bildschirmauflösung anzupassen?