Как сделать 100vh в портретную и 100% в landscape и чтоб не пересекались размеры телефонов и ПК?

Question

[xonar]

Всем доброй ночи.

Есть секция которая имеет 100vh и при перевороте на телефоне в 100% переключается , так как из-за vh всё ломается в orientation:landscape.

Всё работает нормально до определенного момента, когда у телефона orientation:landscape до 756px всё ок, а вот если выше 756px, то опять принимает 100vh.

На большинстве мобильных устройств всё нормально, но у заказчика телефон огромный с fullhd и в landscape положение, его аппарт имеет разрешение как у ПК. Из-за этого разрешения пересекаются.

.page__one {
    position: relative;
    background: url(/build/image/section1/background.jpg) 0 0 no-repeat;
    background-size: cover;
    height: 100vh;

    @media (max-width: 756px) and (orientation:landscape) {
        height: 100%;
    }

}

Есть вариант с pixel ratio, но пока никогда его не применял в практике. Буду благодарен, если подскажете.

Comments

[Ankhena]

но у заказчика телефон огромный с fullhd и в landscape положение

Сначала пусть откроет вот это и выяснит реальный размер вьюпорта https://www.esolutions.se/en-GB/test

И еще есть единицы измерения vmin и vmax.

Answer 1

[xonar]

Всем спасибо, решил проблему с помощью device-pixel-ratio.