Bootstrap Responsive layout hide nav on iPad

问题

Bootstrap has an amazing responsive layout system, however, sometimes its sizing with retina screens isn't quite 'right'.

For example, my retina iPad has a huge screen size but the actual display isn't the same. On the iPad I'd like to hide the left navigation component and use the expand button in the header control to show/hide, however, my iPad retina hits the large screen size and therefore is not hidden.

I've got my left nav using the bootstrap 3 classes: nav-left nav-collapse and I realize I can adjust the min/mid/max sizes but i dont think thats the right approach. What am I missing?

回答1:

Style your page using @media queries.

Just like this:

@media for retina

@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 for iPad Landscape and Portrait

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

Source of @media for iPad/iPhone @media queries

来源：https://stackoverflow.com/questions/20221111/bootstrap-responsive-layout-hide-nav-on-ipad