Как заставить Bootstrap корректно отображать веб-страницы на экране маленьких смартфонов?
Использую четвертую версию Bootstrap. Открывая сайт на iPhone 5S в книжной ориентации вижу, что правая и немалая часть страницы за пределами границ экрана. Приходится масштабировать страницу.
Почему-то браузер считает, что страницу нужно масштабировать не по параметру ширины 320 px, а по высоте экрана: 568 px. В альбомной ориентации все как надо, конечно же.
Как заставить Bootstrap и браузер взаимодействовать корректно в этом случае?
Добавить брейкпоинт в SASS для экрана 320 px? Так себе выход. При этом у div.container margin-left имеет значение auto, которое делает громадный отступ слева. Да, его можно обнулить через CSS, но тогда остаётся громадный отступ справа.
Использовать JavaScript, чтобы на таких экранах менять класс container на container-fluid? Тоже не очень хотелось бы.
lezhenkin, ну с яблоками то все равно постоянные проблемы)))
а вообще, я с такой проблемой именно на разрешение не сталкивался, но были случаи, когда у дочерних элементов были свойства которые позволяли вылазить за границу, например статичная ширина. еще сталкивался с проблемой когда двигаешь в браузере границу для изменения ширины, то что-то не корректно начинает отображаться, это связано с js, но при этом когда открываешь на определенной ширине все отображается нормально.
Михаил, на маленьком экране классу container присваивается свойство width: 100%. Поэтому страница становится шириной 568px. Вопрос только в том, как заставить её в книжной ориентации принимать ширину 320px для этого width:100%
lezhenkin, давай думать логически, если 100% это 568, значит родительский контейнер выходит за рамки, и возможно у какого-нибудь body стоит width:100vh
Простой
Средний
