css - 移动浏览器列 View 问题 Material 设计(css)

Question

我有一个 Angular MD 模板，它在大屏幕上使用行布局，在移动设备上使用列布局。但是，在手机上的大多数标准浏览器中，我会得到一个奇怪的结果，即列太大。我有不同的屏幕截图来说明它的外观。

PC view

Mobile view how it looks on Chrome/ff/Opera

Mobile standard browser view (problem)

我的简化代码(3 行/列)如下

<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

我做了一个 demo on codepen.io使用 Chrome，但正如 BotanMan 所说，Safari 5.1.7 (windows) 似乎不支持 flexbox，我什至无法使用 IE11 在 codepen 上对其进行测试。

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

根据 caniuse.com ，每个最新版本的浏览器都应该能够使用 flexbox。 *有关更多兼容性信息，请参阅链接。

*顺便说一句，您在第二个“layout-align”指令中缺少一个“=”。