2016-12-10 8 views
1

Я заметил странную проблему с iPhone6 ​​Plus в ландшафтном режиме и Bootstrap3 со своими медиа-запросами. В принципе, на iPhone6 ​​плюс в ландшафтном режиме достаточно места, чтобы заставить его действовать как планшет iPad в портретном режиме.Как сделать ландшафтный режим iPhone6 ​​Plus лучше с Bootstrap3?

Пейзажный режим iPhone6 ​​Plus имеет ширину пикселя 736 пикселей. Режим портретной ориентации iPad имеет ширину пикселя 768 пикселей.

При попытке сделать сетку с помощью Bootstrap3, col-sm- * работает только для 750px и выше. Таким образом, вы можете захватить режим iPad Portrait и заставить его работать с этим классом. Однако он не работает с ландшафтным режимом iPhone6 ​​Plus.

Как я могу переопределить Bootstrap 3, чтобы класс col-sm- * CSS работал на 736px и выше, фиксируя ширину и ширину столбцов и контейнеров? Конечной целью было бы позволить ландшафтный режим iPhone6 ​​Plus действовать больше, как в режиме портрета iPad.

+0

Я попытался исправить это более элегантно, создав [настраиваемый шаблон начальной загрузки] (https://stackoverflow.com/questions/41072323/how-to-make-iphone6-plus-landscape-mode-work-better-with -bootstrap3) с SM на 730px, но это не сработало, но ниже целевой медиа-запрос все еще остается. –

ответ

0

Если кто-то не придумает лучшего ответа, мне нужно создать медиа-запрос только для 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-жидкость, и .col-SM- *, возможно.