为什么Bootstrap导航在手机横向模式下延伸到屏幕下方？答案

【问题标题】：Why is Bootstrap navigation extending below the screen in landscape mode of phone?为什么Bootstrap导航在手机横向模式下延伸到屏幕下方？
【发布时间】：2016-06-15 06:58:12
【问题描述】：

我创建了一个网站http://sycoscientistrecords.github.io/ 现在，当我在计算机的 chrome 浏览器中打开该网站并使用设备工具栏模仿移动设备的横向模式时，导航菜单可以正常工作。 Bootstrap 降低了包含 div 的导航的高度并允许滚动。在开发者工具引导程序中使用以下媒体查询

@media (max-device-width: 480px) and (orientation: landscape)
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: 200px;
}

但是当我在实际的手机（android）上以横向模式打开我的网站时，没有应用max-height: 200px，最后两个导航项在手机屏幕下方扩展；使它们完全无法访问。所以我的问题是：

为什么在手机横屏模式下，Bootstrap 导航会延伸到屏幕下方？

【问题讨论】：

在我的手机上完美运行（Android 也一样）。您确定您的浏览器没有设置为打开桌面版而不是移动版吗？
@MarinNedea 有一个request desktop site 选项。但它没有被选中。
我试图复制您的问题，但没有成功。可能是你手机浏览器的兼容性问题。
@MarinNedea 我现在在另一部安卓手机（华硕）上试了一下，问题仍然存在。我会尝试发布它的快照或视频记录。

标签： android html css twitter-bootstrap screen

【解决方案1】：

问题在于，现在普通的 5 英寸手机的高度超过了 600 个逻辑像素。但是引导媒体查询适用于小于 420 的逻辑像素高度，参见 @media (max-device-width: 480px) and (orientation: landscape)。所以我需要在我的 style.css 文件中使用自定义媒体查询：

@media (max-device-height: 480px) and (orientation: landscape)
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: 200px;
}

我的 navbar-header 是 60px 高，navbar 是 310px 高所以我需要任何最大宽度大于或等于 370px 的媒体查询。

【讨论】：