Chế độ xem cột trình duyệt di động phát hành thiết kế material design (css)

Question

Tôi có mẫu MD góc sử dụng bố cục hàng trên màn hình lớn và bố cục cột trên thiết bị di động. Tuy nhiên, trong hầu hết các trình duyệt chuẩn trên điện thoại di động, tôi nhận được kết quả lạ khi các cột quá lớn. Tôi có màn hình khác nhau của nó nên trông như thế nào.

PC view

Mobile view how it looks on Chrome/ff/Opera

Mobile standard browser view (problem)

Mã của tôi đơn giản hóa (3 hàng/cột) như sau

<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

Tôi đã thực hiện một demo on codepen.io với Chrome, nhưng có vẻ như Safari 5.1.7 (windows), như BotanMan nói, rằng flexbox không được hỗ trợ Tôi thậm chí không thể kiểm tra nó trên codepen với IE11.

<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> 

Theo caniuse.com, mọi phiên bản mới nhất của trình duyệt đều có thể sử dụng flexbox. * Xem liên kết để biết thêm thông tin về khả năng tương thích.

* BTW bạn thiếu một '=' trong chỉ thị 'sắp xếp bố cục' thứ hai.