Css 引导响应式布局在iPad上隐藏导航

Bootstrap有一个惊人的反应灵敏的布局系统，然而，有时它的视网膜屏幕大小不太“正确”

例如，我的视网膜iPad有一个巨大的屏幕尺寸，但实际的显示是不一样的。在iPad上，我想隐藏左侧的导航组件，并使用标题控件中的展开按钮来显示/隐藏，但是，我的iPad视网膜会显示大屏幕，因此不会隐藏

---

我使用bootstrap 3类获得了左导航：

nav left nav collapse

，我意识到我可以调整最小/中间/最大尺寸，但我认为这不是正确的方法。我遗漏了什么？

使用

@media

查询设置页面样式

就这样, 视网膜的

@media

@仅媒体屏幕
和（最小设备宽度：1536px）
和（最大设备宽度：2048px）
和（方向：景观）
和（-webkit最小设备像素比：2）{
.导航左{
/*在这里输入您的最小/最大尺寸*/
}
.导航崩溃{
/*在这里输入您的最小/最大尺寸*/
}
}

---

@media

用于iPad横向和纵向

@仅媒体屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）{
/*风格就在这里*/
}

---

使用

@media

查询设置页面样式

就这样, 视网膜的

@media

@仅媒体屏幕
和（最小设备宽度：1536px）
和（最大设备宽度：2048px）
和（方向：景观）
和（-webkit最小设备像素比：2）{
.导航左{
/*在这里输入您的最小/最大尺寸*/
}
.导航崩溃{
/*在这里输入您的最小/最大尺寸*/
}
}

---

@media

用于iPad横向和纵向

@仅媒体屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）{
/*风格就在这里*/
}