为什么 Bootstrap 导航在 phone 的横向模式下延伸到屏幕下方？

Question

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

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

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

Why is Bootstrap navigation extending below the screen in landscape mode of phone?

Answer 1

问题是现在一般的5寸手机的高度都超过600个逻辑像素。但是 bootstrap 媒体查询申请小于 420 逻辑像素高度，cf @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，导航栏高 310px 所以我需要任何 max-width 大于或等于 370px 的媒体查询。