Редактирование сайта мобильной версии?

Question

[Денис]

Вообщем локально делаю шапку, чтоб потом если срастется залить на хост. Проверяю как выглядит сайт во всех мобильных девтулсах браузера, отображается все отлично. Заливаю на хост, смотрю с пк уже на хосте через дев тулс отображение на мобиле (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;
}

так должно быть

а выглядит так


Почему все эмуляторы этого не выдают? Может есть более точный инструмент? И как это исправить ?

Comments

[Rustam Bainazarov]

Единственный метод реальной проверки вёрстки на Safari/iOS Safari — в Safari и iOS Safari.

Т. е. на MacOS и в XCode. Можно ещё подключая реальное устройство к ПК на MacOS.

[WapSter]

Владислав Лысков, но эмуляторы то говорят все ок, ты что?) Ну а так по идее они должны все равно стоять рядом % берут доступное им пространство

[Владислав Лысков]

Тимур Турсунбаев, да я не досмотрел, удалил комментарий (да-да, я облажался)
у него padding: 10px 0;, всё ок

[WapSter]

Владислав Лысков, мы всего не видим, скорее всего контент внутри этих блоков влияет ну или стили дочерних. Да простят меня за эти слова про верстальщики: "Используй бутстрап, Денис, таких косяков не будет".

[Владислав Лысков]

Тимур Турсунбаев, есть еще такой момент

[Денис]

ок сейчас скину реальный пример

[Денис]

<!--------- Contacts on top/// --------->
        <div class="info-main padding-bot-off">
            <div class="container flex-container">
                <div class="info-wrapper-contacts">
                    <div class="info-block logo_block"><a href="/"><img src="/include/template/img/logo.png" alt="" title="" /></a></div>
                    <div class="info-block contact">
                        <img src="/include/template/img/phone_circle_white.png" alt="" title="" class="phone_circle" />
                        <div class = "phone-flex-row">
                            <div class="red_text contact-type">Продажа</div>
                            <?
                            $APPLICATION->IncludeFile("/include/txt/top_phone1.php", Array(), Array(
                                "MODE"      => "html",
                                "NAME"      => "блок",
                                "TEMPLATE"  => ""
                                )
                            );
                            ?>
                        </div>
                    </div>
                    <div class="info-block contact">
                        <img src="/include/template/img/phone_circle_white.png" alt="" title="" class="phone_circle" />
                        <div class = "phone-flex-row">
                            <div class="red_text contact-type">Сервис</div>
                            <?
                            $APPLICATION->IncludeFile("/include/txt/top_phone2.php", Array(), Array(
                                "MODE"      => "html",
                                "NAME"      => "блок",
                                "TEMPLATE"  => ""
                                )
                            );
                            ?>
                        </div>
                    </div>
                    <div class="info-block contact">
                        <img src="/include/template/img/phone_circle_white.png" alt="" title="" class="phone_circle" />
                        <div class = "phone-flex-row">
                            <div class="red_text contact-type">Запчасти</div>
                            <?
                            $APPLICATION->IncludeFile("/include/txt/top_phone3.php", Array(), Array(
                                "MODE"      => "html",
                                "NAME"      => "блок",
                                "TEMPLATE"  => ""
                                )
                            );
                            ?>
                        </div>
                    </div>
                    <div class="info-block tour my-hide">
                        <a class="btn_modal btn_tour" href="/tour/dolgoprudniy" target="_blank">3D тур</a>
                    </div>
                    <div class="info-block tour my-hide">
                        <a class="btn_modal btn_tour" href="/tour/mitishchi" target="_blank">3D тур</a>
                    </div>
					<div class="info-wrapper-search my-hide">
                    <form id="searchFormHeaderM" action="/search/index.php" method="GET">
                        <div class="search_block flex">
                            <input class="search_input_data" type="search" name="q" placeholder="Поиск по сайту" />
                            <a href="#" class="search_input_submit" onclick="document.getElementById('searchFormHeaderM').submit();"><i class="fa fa-search"></i></a>
                        </div>
                    </form>
					</div>
                </div>
		
			<div class = "sidebar my-sidebar">
		
					<a class = "link-flex" target="_blank" href="/configurator/">
						<span class="img_span"><img src="/include/template/img/settings.png" alt="Конфигуратор" title="Конфигуратор"></span>
						<span>Конфигуратор</span>
					</a> 
					

			</div>

			</div>
        </div>

[RAX7]

Денис, ты бы песочницу на https://jsfiddle.net/ сделал, а не куски кода в коменты кидал.

Answer 1

[WapSter]

Эмуляторы ios?) Единственно действующий есть только в mac os который полностью подгружает ios. Ищите облачные сервисы.