Mobile Browser Spaltenansicht Probleme Material Design (CSS)

Question

Ich habe eine Angular MD-Vorlage, die ein Zeilenlayout auf großen Bildschirmen und ein Spaltenlayout auf mobilen Geräten verwendet. In den meisten Standard-Browsern auf Mobiltelefonen bekomme ich jedoch ein seltsames Ergebnis, wenn die Spalten zu groß sind. Ich habe verschiedene Screenshots, wie es aussehen soll.

PC view

Mobile view how it looks on Chrome/ff/Opera

Mobile standard browser view (problem)

Mein vereinfachten Code (der 3 Zeilen/Spalten) ist als

<div layout="row" layout-align="center center"> 
    <div flex="50" flex-sm="90" flex-md="80" class="row3" layout="row" layout-sm="column"> 
    <div flex="40" flex-sm="100" layout="row" layout-align "center start"> 
     <!-- first column --> 
    </div> 

    <div flex="20" flex-sm="100" style="background: #2AFF00"> 
     <!-- second column --> 
    </div> 

    <div flex="40" flex-sm="100" layout="row" layout-align="center start"> 
     <!-- Third column --> 
    </div> 
    </div> 
</div> 

Answer 1

folgt ich ein demo on codepen.io mit Chrome gemacht habe, aber es scheint Safari 5.1.7 (windows), wie BotanMan sagte, dass flexbox nicht unterstützt wird a Und ich konnte es nicht einmal mit IE11 auf Codepen testen.

<div layout-sm="column" layout="row" layout-align="center center" layout-padding> 
    <div class="row3" layout="row" layout-sm="column"> 
    <div flex-sm="100" flex="40" layout="column" layout-align="start center" layout-margin> 
     <div class="img"></div> 
     <h2>Enter the product's serial number</h2> 
     <button class="md-button">Verify the product</button> 
    </div> 

    <div flex-sm="100" flex="20" layout-margin layout-padding style="background: #2AFF00"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum temporibus iure voluptas recusandae molestiae saepe doloremque velit, consequatur minus sint expedita laboriosam magni architecto omnis, reprehenderit labore maxime ea, fugiat officiis. Commodi, aliquam nisi consequatur!</p> 
     <p>Enim aliquam nihil nam alias consequuntur amet fuga suscipit dolores deleniti ut, quo numquam quaerat harum cupiditate dolore veritatis a sit, nesciunt aut magni commodi sed doloremque quis. Voluptatum cupiditate commodi, magni consequatur, eveniet aut.</p> 
     <p>Sit quae natus quibusdam nesciunt quo rem totam sequi dolorem sint eum perspiciatis molestias illum debitis, nobis eos dolorum. Sunt, perspiciatis voluptas possimus, laboriosam officiis recusandae animi in, nisi suscipit ipsum eaque assumenda odit laudantium!</p> 
    </div> 

    <div flex-sm="100" flex="40" layout="column" layout-align="start center" layout-margin> 
     <div class="img"></div> 
     <h2>Click the button below to enable your webcam and start the scanning</h2> 
     <button class="md-button">Scan W/ webcam</button> 
    </div> 
    </div> 
</div> 

Nach caniuse.com, sollten alle aktuellen Versionen der Browser in der Lage sein Flexbox zu verwenden. * Siehe den Link für weitere Informationen zur Kompatibilität.

* BTW fehlt ein '=' in der zweiten 'Layout-Ausrichtung' Direktive.