bootstrap 如何判断它是智能手机答案

【问题标题】：How does bootstrap tell that it is a smartphonebootstrap 如何判断它是智能手机
【发布时间】：2019-03-24 21:56:36
【问题描述】：

我知道如何使用引导程序，但我想了解其功能。我最近在 HTC One 上尝试了 getbootstrap.com，屏幕大小类似于 1900x1080。该页面仅显示一列和折叠的导航。

但由于首页的布局使用 col-sm-4，它应该切换到超过 768px 的多列布局。

bootstrap 可以通过什么方式判断我使用的是智能手机？

编辑：偶然又遇到了这个帖子。使用警报（屏幕。宽度）您会得到手机似乎发送到服务器的宽度，该宽度小于实际像素大小。例如。我的 Lumia 提醒 403 像素虽然技术上它在垂直位置有 720 像素。

【问题讨论】：

BOotstrap 不知道 IIRC - 但 bootstrap 知道屏幕大小。它并不真正关心智能手机；）
如果它不关心，那么它应该显示 3 列，因为有 1080px 的空间。但它的行为，好像会小于 768px！
可能我的回答错了：您所说的屏幕尺寸是多少：px 还是实际尺寸（cm）？
像素。据我所知，引导程序按媒体大小 - 像素大小 - 并在屏幕的分辨率（像素）低于定义的阈值时切换到不同的布局。这是否是智能手机无关紧要。检查getbootstrap.com/css/#responsive-utilities - 这是控制。基本上有 4 类设备，由水平分辨率定义。
根据该表 - HTC 不应该表现得像“中型设备”吗？但它实际上表现得像一个“超小型设备”。

标签： twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

将此添加到您的 HTML 头中..

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

这告诉较小的设备浏览器如何缩放页面。您可以在此处阅读更多相关信息：https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

【讨论】：

【解决方案2】：

我了解您的问题，还有其他方法可以使用媒体来检测设备

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}

以device-pixel-ratio 为例。

您可以检查设备像素比，以便检测这种设备。

其他有趣的链接：Media queries and device pixel ratio

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

【讨论】：

【解决方案3】：

这对我有用：

<head>
  <meta name="viewport" content="width=device-width">
</head>

并且 Bootstrap 必须同时具有菜单选项才能在智能手机或 PC 浏览器时切换，例如：

<nav class="navbar navbar-inverse ng-scope" role="navigation" >
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#not-google-plus-nav">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/"><b>Objetos Perdidos</b></a>
    </div> <!-- ./navbar-header -->

    <div class="collapse navbar-collapse" id="not-google-plus-nav">
      <ul class="nav navbar-nav pull-right">

          <li><a href="/+admin">+admin</a></li>
          <li><a href="/+admin/settings">Mi Cuenta</a></li>
          <li><a href="/register">Registrar Usuario</a></li>
          <li><a href="javascript:void(0)" ng-click="vm.logout()">Salir</a></li>

      </ul>
    </div> <!-- /.collapse.navbar-collapse -->
  </div> <!-- /.container-fluid -->
</nav>

“导航栏切换折叠”按钮将显示在智能手机中，而不是普通菜单中

【讨论】：

【解决方案4】：

Bootstrap 使用媒体查询。查看 bootstrap.css 文件中的 @media 部分。

@media(max-width:767px){--some CSS--}
@media(min-width:768px){--some CSS--}
@media(min-width:992px){--some CSS--}
@media(min-width:1200px){--some CSS--}

Here 是文档中解释相同内容的部分。另外，here 是我推荐的链接 (MDN)，如果您想使用媒体查询。

【讨论】：

【解决方案5】：

它没有。 BOotstrap 响应式设计基于渲染端口的水平分辨率 - 甚至不是屏幕（当我将浏览器调整为更小时，我会得到相同的行为）。

http://getbootstrap.com/css/#responsive-utilities

这里有一些定义。这基本上是 Bootstrap 响应式设计，根据可用的水平像素数将设备分为 4 类。没有说“这是一部手机”，只有在分辨率低于 768 像素时才假设它是一部手机。

【讨论】：

我再试一次：htc 不低于 768，超过了！！！！！！但它的行为就像它会小于 768。所以在我的逻辑中，必须有其他东西告诉 css 不要使用 @media (min-width: 768px) {} 内部的内容