it-swarm.com.de

Skalieren Sie den gesamten Körper, wenn Sie die Größe des Fensters ändern

Ich möchte eine Website erstellen, die nicht ansprechend ist, aber wenn die Größe der Fenster geändert wird, wird alles vergrößert/verkleinert und behält das gleiche Verhältnis. Es ist egal, ob die Wörter auf einem kleinen Bildschirm zu klein sind. Die erste Priorität besteht darin, das Überlappen der Elemente bei der Größenänderung zu verhindern

Ich habe versucht mit:

<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

Und

<script type="text/javascript">
  $(document).ready(function () {

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

    calculateNewScale(); // if the user go to the page and his window is less than 1920px

    function calculateNewScale() {
      var percentageOn1 = $(window).width() / 1920);
      $("body").css({
        "-moz-transform": "scale(" + percentageOn1 + ")",
        "-webkit-transform": "scale(" + percentageOn1 + ")",
        "transform": "scale(" + percentageOn1 + ")"
      });
    }
  });

Und auch mit CSS

body {
width:100vw;
height:100vh;
}

Die Website ist hier:

kotechweb.com/new_focus/page/about_us

Das Problem ist, dass sich der Inhalt bei der Größenänderung überschneidet.

17
user782104

Der Ansichts-Port: <meta name="viewport" content="width=device-width, initial-scale=1">. Dadurch rendert der Browser die Breite der Seite auf der Breite des eigenen Bildschirms. Dieser Artikel enthält weitere Informationen zu den Viewport-Meta-Tags: https://developer.mozilla.org/de/ docs/Mozilla/Mobile/Viewport_meta_tag

9
Victor Luna

<meta id = "meta" name = "viewport" content = "width = Gerätebreite; anfängliche Skalierung = 1,0; maximale Skalierung = 1,0; vom Benutzer skalierbar = 0;">
funktioniert nur, wenn das Fenster nicht neu dimensioniert wird

die berechneNewScale () - Funktion versucht nur, die Größe des Körpers zu ändern Ihre Schriftgröße wird in px festgelegt - ändern Sie sie in% oder rem

Ich weiß, dass Sie nicht möchten, dass die Site reaktionsfähig ist, aber das Festlegen von CSS-Medienabfragen kann bei dem helfen, was Sie möchten.

4
Lucky Chingi

sie können für Antwort verwenden

1. width = Gerätebreite-Teil legt die Breite der Seite entsprechend der Bildschirmbreite des Geräts fest (je nach Gerät unterschiedlich) . 2.Initial-Skala = 1,0 Teil legt die anfängliche Zoomstufe fest Die Seite wird zuerst vom Browser geladen meta name = "viewport" content = "width = Gerätebreite, anfängliche Skalierung = 1,0"

einige zusätzliche Regeln: 1. Verwenden Sie KEINE Elemente mit fester Breite 2. Lassen Sie den Inhalt NICHT auf eine bestimmte Breite des Ansichtsfensters angewiesen sein. 3. Verwenden Sie CSS-Medienabfragen, um unterschiedliche Formatierungen für kleine und große Bildschirme anzuwenden

sie können auch Medieneigenschaften verwenden und screen wise css anwenden.

3

Ihr Viewport-Tag ist falsch, sollte <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> sein.

Aber vielleicht funktioniert <meta name="viewport" content="user-scalable=no" />.

2

Es gibt einige Möglichkeiten, die Sie tun können: 1. Ändern Sie Ihr HTML-Layout. Fügen Sie Bild, Inhalt und Fußzeile in einen Container oder Wrapper ein

<html>
  <head></head>
  <body>
    <div id="wrapper">
      //everything goess inside here
    </div>
  </body>
</html>
  1. verwenden Sie rem/em anstelle von px. Sie haben rem/em/vw nicht konsequent verwendet. Das heißt, für den linken Rand haben Sie 50px verwendet. Und es wird Zeit geben, zu der sich Word verschieben lässt.

  2. ihr Tag enthält Bootstrap. Wenn Sie Bootstrap verwenden, sollten Sie BootStrap Grid besser verwenden. Ich würde zuerst eine Seite für die mobile Anzeige erstellen und dann dasselbe Layout für einen größeren Bildschirm verwenden.

viel Glück.

2
sagarthapa

Wenn Sie bootstrap verwenden, können Sie einfach Ihre Containerklasse in class = "container-fluid" ändern.

2
Mark

Bei der Verwendung von pure transform: scale (x) werden Sie viele Rand-, Zentrierungs- und Positionierungsprobleme feststellen, es sei denn, Sie kompensieren dies mit etwas Javascript-Logik.

Einige CSS-Dinge, die Sie tun können:

1) Sie können die Hauptskala des Hintergrunds basierend auf der Browserbreite erstellen, indem Sie sie anwenden

body { 
  background-size: cover;
  background-repeat: no-repeat;
}

2) Sie können alle Maßeinheiten basierend auf vw-Einheiten ähnlich wie folgt machen:

Fontskalierung basierend auf der Breite des Containers

wenn Sie beispielsweise möchten, dass Ihre Schriftarten proportional zu Ihrer Breite skaliert werden, können Sie festlegen

body {
  font-size: 0.835vw; //around 14px at 1920px
}

Ein anderes Beispiel ist, wenn Sie einen Container, der 300px hoch bei 1920px Breite ist, basierend auf der Breite skalieren möchten, diesen Container erstellen können

.container {
  height: 150vw; //around 300px at 1920px
}

Vermutlich versuchen Sie nicht, die Fußzeile bei allen Größen unten zu halten. Ansonsten können Sie einfach Position verwenden: Fest; auf der Fußzeile.

Wenn Sie ein festes Seitenverhältnis beibehalten, werden Sie einen sehr lustigen Abstand haben, wenn die Höhe des Browsers größer als die Breite ist. Bist du sicher, dass du das willst?

Beachten Sie, dass dies eine sehr merkwürdige Möglichkeit ist, um die Größe von Inhalten zu ändern, was zu Leistungs- und Lesbarkeitsproblemen führen kann (was Ihnen bekannt ist). Die meisten Leute würden empfehlen, nur ein Meta-Tag für Geräte zu verwenden oder Ihre Elemente ansprechbar zu machen.

1
Vincent Chan