Bootstrap在iPad上响应布局隐藏导航 [英] Bootstrap Responsive layout hide nav on iPad

问题描述

Bootstrap有一个惊人的响应布局系统，但是，有时它的大小与视网膜屏幕不是很对。

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

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

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.

我有我的左导航使用bootstrap 3类： nav-left nav-collapse ，我意识到我可以调整min / mid /最大尺寸，但我不认为这是正确的方法。

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?

推荐答案

使用 @media 查询为网页设计样式

Style your page using @media queries.

@media for retina

@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 肖像

---

@media for iPad Landscape and Portrait

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

a href =http://stephen.io/mediaqueries/ =nofollow> @media for iPad / iPhone @media查询的来源

Source of @media for iPad/iPhone @media queries

这篇关于Bootstrap在iPad上响应布局隐藏导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！