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

Question

Bootstrap具有出色的响应式布局系统，但是，有时其与视网膜屏幕的尺寸并不完全“对”。

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

我使用bootstrap 3类获得了左侧导航：nav-left nav-collapse我意识到我可以调整最小/中/最大大小，但是我认为这不是正确的方法。我想念什么？

Answer 1

使用@media查询设置页面样式。

像这样：

@media 视网膜

@media only screen 
  and (min-device-width: 1536px)
  and (max-device-width: 2048px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
  .nav-left {
    /* STYLE HERE YOUR MIN/MAX SIZE */
  }

  .nav-collapse {
    /* STYLE HERE YOUR MIN/MAX SIZE */
  }
}

@media 适用于iPad横向和纵向

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {
  /* STYLES GO HERE */
}

iPad / iPhone @media查询的@media来源