Wie setze ich eine minimale Breite für Ihre Website/Ansichtsfenster und Browser-Skalierung, wenn die Breite unter diesem

Question

Ich versuche, mein Gehirn um Viewports/Waagen wickeln. Ich habe eine Website, die ich programmieren muss, und das Design, das mir gegeben wurde, ist ansprechend, aber es funktioniert wirklich nicht, wenn die Breite des Geräts unter 420px liegt.

Bei etwas unter 420px, würde ich es lieben, wenn der Browser würde die Website als wäre es 420px breit, nur Zoom alles aus, aber ich kann nicht herausfinden, wie dies zu tun.

Ich habe gesehen, wie Sie das Meta-Ansichtsfenster-Tag dynamisch ändern können, aber wenn ich das tue, scheint es keinen Einfluss zu haben, und ich bin mir nicht sicher, ob das der beste Weg ist, an das heran zu kommen versuchen zu erreichen.

Auf jeden Fall ist es das, was ich versucht:

var minBP = 420; 
//ww = window width 

if (self.ww < minBP && lastScreenWidth > minBP){ //site is smaller than minimum allowed width, modify viewport 
    var viewportString = "width=" + minBP + ", initial-scale=1.0"; 
    $('#blackrock-viewport').attr('content',viewportString); 
} 

Wer weiß, wie eine verkleinerte aus 420 Darstellungsbreite zu machen, wenn der Browser unter diesen Abmessungen fällt?

Answer 1

gut Sie, dass in CSS tun können durch Media Queries mit ermöglicht es Ihnen, evrything in diffrent Bildschirme

für exemple zu manipulieren, wenn Sie die Breite des div in 420px Bildschirm ändern möchten Sie dies tun können:

@media (min-width:420px) { 
div{ 
width:50px; 
    } 
} 

Answer 2

Sie können einfach media queries verwenden, um bestimmte Elemente auf bestimmten Bildschirmgrößen anzusprechen.

Für Ihre Situation müssen Sie nur Ihre wrappers Breite auf Ihre bevorzugte Größe beschränken.

Angenommen, Sie haben eine div, die alle Ihre Seite umschließt, sagen wir .wrapper.

@media screen and (max-width:420px) { 
    .wrapper{ 
    width:420px; 
    } 
} 

Natürlich können Sie dies ohne Abfragen Medien auch tun, indem Sie einfach die min-width Eigenschaft Ihres Wrapper einstellen.

Aber ich nehme an, dass mit Medienabfragen Sie flexibler sind.