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

Question

我创建了一个网站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导航会在手机的横向模式下延伸到屏幕下方？

Answer 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;
}

我的导航栏标题高60像素，导航栏高310像素所以我需要任何最大宽度大于或等于370像素的媒体查询。