Ландшафтный вид Bootstrap 3 на мобильных устройствах с высокой плотностью

#css #twitter-bootstrap #responsive-design #twitter-bootstrap-3

#css #twitter-bootstrap #адаптивный дизайн #twitter-bootstrap-3

Вопрос:

Я только что разработал свой первый загрузочный сайт, используя версию 3. До этого я использовал адаптивную сеточную систему. Когда я перехожу к просмотру в альбомной ориентации на iPhone 5 или LG G2, плотность пикселей приводит к отображению страницы в маленьком портретном режиме.

Я провел вчерашний день, читая медиа-запросы, но я немного новичок. Допустим, я использую один из запросов специально для iPhone 5. В части CSS какие классы по умолчанию необходимо изменить, чтобы страница оставалась широкой в альбомной ориентации?

Адаптивная сеточная система не использовала пиксели в CSS, и, насколько я помню, у меня не было этой проблемы. Нужно ли мне переделывать Bootstrap CSS, чтобы устранить проблему?

1. Медиа-запросы связаны с шириной пикселя. Вы должны выяснить, насколько широк ландшафт iPhone 5, и соответствующим образом настроить его. Медиа-запросы находятся в вашем CSS-файле и начинаются с @media . Я не думаю, что кто-то собирается перечислять классы, но вы можете найти их, просмотрев документы bootstrap и / или ваши CSS-файлы.

2. Я понимаю медиа-запросы. iPhone специально использует самый широкий (568 пикселей) в качестве высоты, даже когда он находится в ландшафтном режиме. Так что, я думаю, я бы боролся с двумя проблемами. Нужно ли изменять каждый отдельный запрос, который является @media (максимальная ширина: 768 пикселей), чтобы он понимал пиксели устройства?

Ответ №1:

Вам нужно установить масштаб области просмотра. Например. <meta name="viewport" content="width=device-width, initial-scale=1">

Подробнее здесь

1. Тогда вы ищете медиа-запрос для устройств с высокой плотностью пикселей?

2. Я специально не нацелен на эти устройства. Большинство сообщений посвящены именно этому. Я бы хотел, чтобы страница оставалась широкой в альбомном режиме, как и устройство с соотношением пикселей 1.

3. Не могли бы вы добавить jsfiddle или codepen, чтобы проиллюстрировать, что вы хотите?

4. Я не собираюсь делать ничего особенного. Если перейти на официальный сайт Bootstap v3 на iPhone 5, LG G2 или Samsung S4 в альбомной ориентации, страница будет отображаться в формате <768 пикселей. Мой Galaxy Nexus, который старше и имеет более низкое разрешение, правильно отображает страницу в альбомной ориентации. Это просто телефоны с соотношением пикселей> 1, которые отображаются как экран с низким разрешением.