Bootstrap skaliert nicht richtig auf mobilen Geräten

Ich habe in den letzten Wochen eine Website in Rails für eine lokale Hochschule als Nebenprojekt entwickelt. Es ist meine erste Produktionsstätte in Rails und Bootstrap verwenden, um die Entwicklung zu beschleunigen. Die Website sieht gut aus und alles funktioniert hervorragend, außer wenn ich versuche, von einem mobilen Gerät aus auf die Website zuzugreifen. Wenn Sie zum ersten Mal eine Seite laden, wird die Seite vergrößert angezeigt. Ich erlaube die Skalierung des Benutzers, so dass es kein großes Problem ist, nur eine nervige kleine Eigenart, die ich loswerden wollte.Bootstrap skaliert nicht richtig auf mobilen Geräten

Es tritt nur auf, wenn die Seite anfänglich in einer vertikalen Ausrichtung geladen wird. Wenn die Seite horizontal geladen wird, ist es in Ordnung.

Hier sind meine Meta-Tags

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="HandheldFriendly" content="true">

Hier sind einige Bilder, da ich nicht allzu sicher bin, klar bin ich zu sein.

Vertikale Ausrichtung: http://imgur.com/guJIG5k

Horizontale Ausrichtung: http://imgur.com/SNwvPFD

Das Ergebnis ist das gleiche auf meinem Galaxy S3, ein iPhone 5C und einem iPhone 5S

Quelle

2014-01-30 Nate

Die inneren Elemente des Gitters können eine feste Breite haben, die größer ist als die Größe des mobilen Bildschirms. Überprüfen Sie das CSS der Elemente, um das mit der überlaufenden Breite zu finden.

Sie können Medienabfragen verwenden, um das Problem mit der Breite zu beheben. Wie unten

@media (max-width: 320px) { 
.element { 
     width: 90%; 
    } 
}

Quelle

2014-01-31 06:01:07 winnyboy5

Stellen Sie sicher, hinzufügen:

<meta name="viewport" content="width=device-width, initial-scale=1">

zu Ihrer <head>.

Passen Sie die Größe des Browsers wie ein Galaxy S3 horizontal, sieht es gut aus?

Quelle

2014-01-31 01:40:31 edudepetris

Funktioniert nicht ... – wordsforthewise

Winnyboy5 Lösung wahrscheinlich für Sie gearbeitet, weil Sie nicht das Raster ordnungsgemäß verwendet wurden, aber beachten Sie, dass es schwer ist, die Codierung der Größe und wenn einen größeren Bildschirm verwenden, wird es nicht entsprechend den verfügbaren Platz nehmen einstellen , den Zweck des Bootstrap zu besiegen.

Um die Darstellungs Arbeit zu machen, wie es auf dem Handy angenommen hat, müssen Sie sicherstellen, dass Sie haben die die container div Verpackung alles benötigt:

<div class="container"> 
Your other elements go in here 
</div>

OR:

<div class="container-fluid"> 
Elements here 
</div>

Der einzige Unterschied mit "fluid" container ist, dass es den gesamten platz einnehmen wird.

Dann, diese zu Ihrem Kopf wird auf dem Handy arbeiten:

<meta name="viewport" content="width=device-width, initial-scale=1">

Quelle

2017-02-05 17:04:23

stand ich vor dem gleichen Problem.

Ich hatte die Containerbreite in der CSS als;

.container{ 
    width:640px 
}

Ändern width-max-width für mich gearbeitet.

Quelle

2017-09-14 20:06:59 richie

Bootstrap skaliert nicht richtig auf mobilen Geräten

Antwort

Verwandte Themen