HTML-Seite automatisch skalieren - html, css

Ich frage mich, ob es möglich ist, nicht scrollbare Web-Seite mit voller Breite Header, Inhalt und Fußzeile auf verschiedenen Bildschirmgrößen zu skalieren? So kann es als Frontend für Web-Kiosk betrieben werden.

Antworten:

Ja, es ist möglich. Du könntest etwas einfaches machen wie (jsFiddle):

Karosserie:

<div id="header"> header </div>
body
<div id="footer">footer</div>

Und verwende CSS, um das Layout zu verwalten:

#header{width:100%; background:#f00;}
#footer{width:100%; background:#f00;bottom:0;position:absolute;}

Um die Seite nicht scrollbar zu machen, können Sie die Bildlaufleisten auf der Seite ausblenden, indem Sie Folgendes angeben:

body{ overflow: hidden;}

Dies funktioniert nicht perfekt für alle Szenarien, aber es sollte Ihnen den Anfang machen.

Sie könnten vh- und wh-Einheiten in CSS 3.0 verwenden

Überprüfen Sie dies Verknüpfung Für weitere Informationen könnten Sie auch einige Beispiele sehen Hier und sehe es in Aktion

Ja, es kann gemacht werden. Hier ist eine Javascript-Funktion, die ich mit ein wenig CSS erstellt habe. Dies ist ideal für die automatische Größenanpassung einer Seite, ohne dass das Verhältnis geändert wird. Dadurch wird die Größe der Seite beim Start und bei der Größenänderung des Fensters geändert.

CSS:

body{
height:620px;
width:1023px;
position:absolute;
box-sizing:border-box;
transform-origin: 0 0;
-moz-transform-origin:0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}

JavaScript:

var ratio;
var left;
resize();

$(window).resize(function () {resize();});

function resize()
{
ratio = window.innerHeight / $("body").innerHeight();
if (window.innerWidth / $("body").innerWidth() < ratio) {
ratio = window.innerWidth / $("body").innerWidth();
}
ratio -= .04;
$("body").css("-ms-zoom", ratio);
$("body").css("-moz-transform", "scale(" + ratio + ")");
$("body").css("-o-transform", "scale(" + ratio + ")");
$("body").css("-webkit-transform", "scale(" + ratio + ")");
$("body").css("transform", "scale(" + ratio + ")");
left = ($(window).innerWidth() - $("body").outerWidth() * ratio) / 2;
$("body").css("left", left);
}