Bootstrap веб-дизайн, имеющий разные измерения на разных экранах

Question

У меня есть следующий HTML-код для отображения на двух разных экранах (устройство: iphone 6/7/8).

<div class="container-fluid">
   <div class="row">
       <div class="col-4 bg-light">asdlo</div>
          <div class="col-4 bg-warning">asdlo</div>
       <div class="col-4 bg-light">asdlo</div>
   </div>
 </div>

Похоже, что один из выходных данных показывает размер столбца 125,06 х 29,6, а другой показывает 125 х 24. Могу ли я узнать, как убедиться, что дизайн одинаков во всех устройствах iphone? или это только наши настройки экрана, которые делают измерение другим и приводят к небольшому изменению дизайна?

Я использую Bootstrap 4 для разработки мобильного Интернета.

Answer 1

Запустите ваше приложение в Google Chrome. Используйте F12, чтобы открыть инструменты разработчика. В левом углу нажмите кнопку, похожую на телефон

Оттуда вы можете эмулировать различные устройства. Вы можете выбрать iPhone.

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

Посмотрите здесь, чтобы получить css медиа-запросы по устройству

Пример:

@media only screen and (min-device-width : 414px) and (max-device-width : 736px) { /* STYLES GO HERE */}

Answer 2

Вы можете просто проверить код и нажать кнопку переключения на панели инструментов устройства или Ctrl + Shift + M.Тогда вы можете увидеть некоторые отзывчивый вариант в верхней части.Просто нажмите на него и выберите свое устройство и проверьте, хорошо ли оно или нет.

Если оно не подходит на определенной ширине, просто запишите его и используйте какой-нибудь медиа-запрос в css