Beschränken Sie die Breite und Höhe des Ansichtsfensters auf der Website

Question

Ich entwickle eine responsive Website. Für diese Website sind die Auffüllung und die Breite der Elemente proportional zur Breite und/oder Höhe der Webseite. Also habe ich es vorgezogen, die Viewport-verwandten Einheiten (vh, vw) zu verwenden. Alles skalieren absolut gut bis ich eine neue Anforderung bekam ...

Jetzt muss ich die maximale Breite und Höhe auf meiner Webseite setzen. maximale Breite von 1366px und maximale Höhe von 768px. So habe ich Max-Höhe und Max-Breite CSS-Stile zu meinem HTML-Tag hinzugefügt.

Webinhalt ist jetzt in diesem Bereich eingeschränkt, aber die Füllung und Breite wird immer unter Berücksichtigung der gesamten Breite und Höhe der Seite als Ansichtsfenster berechnet.

Für z. Wenn die Bildschirmbreite 1500px beträgt, wird 10vw als 150px berechnet. Aber was ich brauche ist, dass es 136.6px nicht überschreiten sollte, da die maximale Breite 1366px beträgt.

Gibt es eine Möglichkeit, die Breite und Höhe des Ansichtsfensters zu beschränken? Wie <meta name="viewport" content="width=device-width, max-width=1366, max-height=768, initial-scale=1">

Answer 1

Wenn Sie Größen für Ihre Ansichtsfenster festgelegt haben, sind erforderlich, um, gibt es keinen Punkt in Ansichtsfenster-Relativ Maßnahmen wie vh verwendet, in einigen Fällen können Sie den Trick mit Prozentsatz zu tun verwalten werden, aber ich wouldn Ich empfehle es nicht.

Der beste Weg, dies zu tun, ist das Ansichtsfenster mit Javascript zu bearbeiten, gibt es

Wieder ein paar Möglichkeiten, um die Breiten und Höhen von Bildschirmen in JS bekommen, wie @hungerstar in einem Kommentar erwähnt, ist es nicht Es wird empfohlen, feste Darstellungsfeldgrößen zu verwenden. Stellen Sie also sicher, dass Sie diese Voraussetzung wirklich haben, bevor Sie sich darauf einlassen.

Hoffe es hilft