Как работает bootstrap на мобильных телефонах с полным hd (1920 × 1080)?

В учебном пособии Bootstrap говорится, что для мобильных устройств (< 768px) есть .col-xs-*. Мой вопрос в том, что если я создаю сайт для небольших мобильных телефонов с использованием классов .col-xs-*, тогда это правило css будет применяться только к тем устройствам, ширина которых меньше 768 пикселей. В настоящее время есть полноприводные мобильные телефоны с шириной 1080 пикселей на 5-дюймовом дисплее. Так будут ли эти мобильные устройства работать как настольный компьютер (≥992px) для моего загрузочного css? Я хочу, чтобы мой css был таким же для любого 5-дюймового экрана мобильного устройства, будь то HD или Full HD.

Ответы

Ответ 1

TL; DR

пиксели CSS не равны физическим пикселям. Пусть каждый из устройств/браузеров выяснит, как они должны отображать ваш контент, скорее всего, все будет правильно.

Экскурсия: медиа-запросы Bootstraps

Во-первых, давайте посмотрим, как работает Bootstrap. Где-то в стандартном bootstrap.css вы найдете этот код (слегка модифицированный и сокращенный для простоты):

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Код, явно заимствованный из официальных загрузочных документов.

Какое разрешение имеет ваш экран?

Итак, как определяется ваш браузер, какие медиа-запросы релевантны? Предположим, что у него есть свойство, которое я бы назвал magicalWidth.

Ваш браузер, чем сравнивает magicalWidth с @media (min-width: @screen-sm-min), а если magicalWidth больше или равен @screen-sm-min, он учитывает все определения внутри { ... }, иначе он просто игнорирует их. То же самое касается всех других медиа-запросов.

Теперь, что такое magicalWidth? Я могу сказать вам, что наиболее вероятно не ширина экрана или окна браузера в (физических) пикселях. CSS использует концепцию логических пикселей для вычисления любого измерения, а наш magicalWidth сверху - это точно ширина вашего устройства или окна браузера в логических пикселях. Вы можете легко проверить это самостоятельно, взгляните на следующий пример:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#f00;">Test 1</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#ff0;">Test 2</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#0f0;">Test 3</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#0ff;">Test 4</div>
</div>

Ответ 2

Если вы видите, что в бутстрапе требуется метатег с именем viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

См. использование этого тега в Bootstrap

Что делать, если кто-то не использует этот тег?

Без этого метатега бутстрап будет работать так же, как вы объяснили в своем вопросе

Теперь, если вы видите метатег, есть свойство с именем width, которое устанавливается на device-width.

Теперь, что такое ширина устройства?

Когда вы идете на рынок и покупаете HD-телефон с разрешением 1080 * 1920, тогда есть также что-то называемое коэффициент пикселя устройства, связанный с каждым устройством (от 1, 2,3,4 и более для HD-устройств).

 

Как вычисляется ширина устройства?

ширина устройства вычисляется по формуле

device-width = real-width/ratio-pixel-ratio

Ширина устройства задает ширину страницы для логического CSS-пиксели и составляет около 360 пикселей или 480 пикселей (вуаля теперь у каждого телефона такая же)

Какие пиксели используют медиа-запросы, на которых построен бутстрап?

Запросы в средствах массовой информации используют пиксели CSS, которые теперь изменены на что-то вроде 360 * 480.

Без метатега viewport было 1080 CSS пикселей в ширину, но с этим тегом теперь есть примерно 360 или 480 пикселей CSS.

Для примера, если вы покупаете Lenovo K3 Примечание о разрешении 1920 * 1080, которое имеет коэффициент пикселя устройства 3, тогда ширина устройства будет

1080/3 = 360 пикселей

который будет установлен в свойство width для метатега viewport.

Ответ 3

5inch может перевести на 480px по оси y. Любой мобильный телефон с 5-дюймовым дисплеем обычно меньше 768 пикселей. Размеры не вычисляют разрешение экрана, а фактические размеры. У меня 5-дюймовый экран 1080 full hd телефоном Android, а также мобильным телефоном с низким разрешением 540x960 точек, и это экран 4.3inch, который может перевести на 412.8px по оси y. и все они ведут себя одинаково, когда я использую .col-xs-* bootstrap css.

Мой вердикт

Что касается Ответ здесь и здесь

Я понимаю, что точки останова CSS зависят от ширины устройства, а не от разрешения экрана.