Question

Site

以上网站使用max-width和min-width进行bootstrap @ media查询，这在我调整桌面浏览器窗口大小时有效。但由于某些原因，我将该网站视为桌面版本，并且媒体查询使其响应不会出现在移动设备中。

对此有何想法？

Answer 1

您只是忘记了通过将视口元标记添加到页面来设置视口宽度。在<head>部分的某个位置的页眉中弹出此内容。

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

查看Bootstrap Docs中的基本示例，了解他们建议您如何使用该标记。

编辑：我刚刚发现了这个long guide on what the viewport tag is以及实际使用的内容，如果你有兴趣看看它。

Answer 2

这是您在网站上查看媒体查询的一些问题的示例：

media="screen"
@media only screen and (max-width: 767px)
#Intro {
max-height: 230px;
}
staging.shipmenthq.com/media="screen"
@media only screen and (max-width: 467px)
#Intro {
min-height: 300px;
}

所以你的最大身高＆amp;最小高度是矛盾的。

至于无反应;我发现.navbar并没有任何一个孩子附加任何媒体查询，因此我们不会做出回应。

您似乎需要通过媒体查询从头开始重新编写它们，因为您有一些重叠＆amp;级联问题。

Answer 3

我发现您关联的网站没有任何问题。它从我所看到的反应中得到了回应。

如果你说你的顶级菜单（标题菜单）没有像Bootstrap网站那样显示，我应该说你在navbar部分缺少几个div。

如果你把它们添加回去，它看起来应该是它的样子。

e.g：

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
    <!-- navbar header div -->
        <div class="navbar-header">
        <!-- navbar collapse btn -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="brand pull-left" href="#Intro"><img src="images/logo.png" width="201" height="38" alt="ShipmentHQ"></a>

        <span class="phoneNumber pull-right"><img src="images/phonenumber.png" alt="call us at 888-234-5678" width="174" height="24"></span>
    <!-- navbar collapse div -->

        <div class="collapse navbar-collapse">
        <ul class="nav pull-right">
          <li><a class="NavLink" href="#Services">Services</a></li>
          <li><a class="NavLink" href="#About">About</a></li>
          <li><a class="NavLink" href="#ResourcesHead">Resources</a></li>
          <li><a class="NavLink" href="#Contact">Contact</a></li>

这是你需要的。

希望这有帮助。

媒体查询不适用于移动设备

3 个答案: