上面的网站有使用 max-width 和 min-width 的 bootstrap @ media 查询，当我调整我的桌面浏览器窗口大小时可以使用。但由于某种原因，我将该网站视为桌面版本，并且使其响应的媒体查询没有显示在移动设备中。
对此有什么想法吗？
【问题讨论】：
标签： jquery html css twitter-bootstrap responsive-design
我认为您链接的网站没有问题。从我所见，它的反应灵敏。
如果您说您的顶部菜单（标题菜单）没有像 Bootstrap 网站那样显示，我应该说您在导航栏部分缺少几个 div。
如果你把它们加回去，它会看起来像它应该的样子。
例如：
<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>
这就是你需要的。
希望这会有所帮助。
【讨论】：
您刚刚忘记通过将视口元标记添加到页面来设置视口宽度。在<head> 部分的某处将其弹出到您的页眉中。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
查看Bootstrap Docs 中的基本示例，了解他们建议您如何使用该标签。
编辑：我刚刚找到了这个 long guide on what the viewport tag is 以及它的实际用途，所以如果你有兴趣可以看看。
【讨论】：
以下是您在网站上的媒体查询遇到的一些问题的示例：
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;
}
所以你的最大高度和最小高度是冲突的。
就无响应而言；我看到 .navbar 及其子项都没有附加任何媒体查询，所以这不会响应。
看起来您需要从头开始重新处理您的媒体查询，因为您有一些重叠和级联问题。
【讨论】：