Вообщем локально делаю шапку, чтоб потом если срастется залить на хост. Проверяю как выглядит сайт во всех мобильных девтулсах браузера, отображается все отлично. Заливаю на хост, смотрю с пк уже на хосте через дев тулс отображение на мобиле (iphone 7) выглядит как задумано. Захожу с телефона (iphone 7) один блок уезжает, не пойму почему. Все эмуляторы показывают все ок, а телефон, не только у меня показывает что блок уехал. Примерная разметка блока такая
<div class = container>
<div class = "div1">
<h2>div 1</h2>
</div>
<div class = "div2">
<h2>div 2</h2>
</div>
</dif>
стили примерно
.container {
width: 100%;
background-color: #000;
color: #fff;
display: flex;
padding: 10px 0;
}
.div1 {
width: 50%;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
}
.div2 {
width: 50%;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
так должно быть
а выглядит так
Почему все эмуляторы этого не выдают? Может есть более точный инструмент? И как это исправить ?
Простой
