Почему не совпадает верстка с реальными устройствами?

Question

[torbach]

почему не сходится верстка в браузере и результат на мобильном телефоне в горизонтальном положении?




Iphone 7 в горизонтальном положении:

Comments

[xdevelx]

А если выбрать Iphone SE (вьюпорт аналогичный с 7) и нажать на rotate для горизонтального положения?

[torbach]

xdevelx,

[xdevelx]

И на Iphone первый пункт меню не по краю контейнера расположен. Надо смотреть верстку меню и разбираться почему в safari так пункты меню расположены.

[torbach]

xdevelx,

<section class="navigation">
        <div class="container">
            <div class="navigation_block">
                <ul class="list">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About me</a></li>
                    <li><a href="#">Skills</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contacts</a></li>
                </ul>
            </div>
            <div class="black_line">
            </div>
        </div>
    </section>

.list{
    list-style-type: none;
    font-family: 'Gilroy-Bold';
    text-align: center;
}

.list li{
    display: inline-block;
    margin-top: 2.06rem;
    
}

.list li a:link, .list li a:visited, .list li a:active{
    color: var(--color-gray);
    transition-property: all;
    transition-duration: .4s;
}

.list li:not(:last-child){
    margin-right: 9.72rem;
}

.list li a:hover{
    color: var(--color-black);
}

.navigation_block{
    margin-bottom: 1.95rem;
}


.black_line{
    height: 0.0625rem;
    background-color: var(--color-gray);

}

Буду благодарен если посмотрите)

[xdevelx]

torbach, замените display: inline-block на flex. А так в целом там нет проблем - все точно в safari поддерживается.

[torbach]

xdevelx, Благодарю!

Answer 1

[Noder SS]

Экран телефона наверное же меньше)