android - iPhone 上的 Bootstrap 网格系统

标签 android iphone bootstrap-4

<分区>

我试图使用 Bootstrap 4 (alpha 6) 网格系统。我进行了以下测试,使用“maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css”

<body>
  <div class="container-fluid">
    <div class="row">
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">1</div>
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">2</div>
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">3</div>
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">4</div>
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">5</div>
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">6</div>
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">7</div>
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">8</div>
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">9</div>
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">10</div>
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">11</div>
    <div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">12</div>
    </div>
  </div>
</body>

是的,这些列与您通常预期的相反,但它使您更容易看到应用的断点。在 PC 浏览器中,断点在我调整屏幕大小时起作用 - 在窄屏幕上是单行,当我全宽时是 6 行。

在我的 iPhone 5 (640×1136) 上,我希望看到根据旋转应用 col-sm-2 和 col-lg-4。相反,我所看到的只是 col-md-3 配置。 Android (Amazon Fire) 也是如此。

总而言之,当我在 iphone5 上使用 bootstrap 网格时,无论旋转如何,我得到的只是中等视口(viewport)。我是做错了什么还是“中等”是手机的标准视口(viewport)?

最佳答案

如本 other question 中所述, 添加元视口(viewport)以在移动设备上适当缩放页面:

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

关于android - iPhone 上的 Bootstrap 网格系统,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44459477/

相关文章:

ios - 如何确保 View Controller 在 segueing 时不会重新加载?

ios - 无法使用 NSXmlParser 获取数据

html - 我的叠加层影响了整张卡片而不仅仅是图像

css - Bootstrap 4 - align-items-* 类根本不起作用

java - ListView 从 MYSQL 数据库检索中的问题

iphone - 以编程方式编写 UIButton 操作代码

Android 清除缓存和数据后重启应用

javascript - Bootstrap 4 阿尔法 6 : collapsed two divs side by side are stacked when expanded

java - Recyclerview在Android中notifyItemChanged后防止触摸事件

javascript - 基于多个 ScrollView(s) 为单个 View 设置动画