如何使 iPhone6 Plus Landscape Mode 更好地与 Bootstrap3 配合使用?

How To Make iPhone6 Plus Landscape Mode Work Better with Bootstrap3?

我注意到横向模式下的 iPhone6 Plus 和媒体查询的 Bootstrap3 有一个奇怪的问题。基本上,iPhone6 plus 在横向模式下几乎有足够的 space 使其在纵向模式下表现得像平板电脑 iPad。

iPhone6 Plus 横向模式的像素宽度为 736 像素。 iPad 人像模式的像素宽度为 768px。

尝试使用 Bootstrap3 进行网格样式设置时,col-sm-* 仅适用于 750 像素及以上。因此,您可以捕捉 iPad 人像模式并使其与 class 配合使用。但是,它不适用于 iPhone6 Plus 横向模式。

我如何重写 Bootstrap 3 以便 col-sm-* CSS class 适用于 736px 及以上,固定容器和容器流体宽度和列宽?最终目标是让 iPhone6 Plus 横向模式更像 iPad 纵向模式。

除非有人能想出更好的答案,否则我要做的就是在横向模式下为 iPhone6 Plus 创建一个媒体查询,并解决问题。

/* iPhone6 Plus Landscape Mode Fixes */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) {
/* FIXES GO HERE */
}

一个更理想的答案可能是调整 .container、.container-fluid 和 .col-sm-*。