Часто, для от разработчика требует сделать сайт, который будет выглядеть на всех устройствах одинаково. Иногда доходит до маразма, но это возможно: зафиксировать ориентацию сайта в мобильном браузере.

зафиксировать ориентацию сайта в мобильном браузере

Вообще говоря, возможности зафиксировать ориентацию сайта в мобильном браузере нет, но есть лазейка, которая позволит на большинстве современных смартфонов и планшетов отображать страницу всегда в портретном (или наоборот всегда в ландшафтном) режиме, то есть зафиксировать ориентацию браузера.

Решение задачи: как зафиксировать ориентацию сайта в мобильном браузере

Всё достаточно прозаично. Мобильные браузеры для iOS, Android и Windows Phone умеют работать с медиа-запросами в CSS (media query).
Более того, они уже знают (в отличии от многих их десктопных собратьев) как поварачивать какие-либо элементы на странице (через transform: rotate).
Если соединить эти 2 возможности воедино, то мы получим, что при выполнении media query «Экран переведен в портретный режим» (или наоборот в ландшафтный) нужно просто повернуть (с помощью transform: rotate) всё содержимое в обратном направлении. При этом страница будет практически фиксированной.

Как это выглядит в коде (зафиксировать ориентацию браузера):


@media screen and (orientation:landscape) and (max-device-width: 900px) {
    html{
        -webkit-transform: rotate(-90deg);
           -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
             -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
        -webkit-transform-origin: left top;
           -moz-transform-origin: left top;
            -ms-transform-origin: left top;
             -o-transform-origin: left top;
                transform-origin: left top;
        width: 320px; /*Разрешение экрана iPhone*/
        position: absolute;
        top: 100%;
            left: 0
    }
}

То есть при повороте экрана в ландшафтный режим, мы поворачиваем корневой тэг HTML на 90 градусов влево (зафиксировать ориентацию сайта в мобильном браузере).

Можно прописать несколько медиа запросов для разных разрешений браузеров.

Демо-пример: Как зафиксировать ориентацию сайта в мобильном браузере. Или можете открыть через браузер своего мобильного устройства (QR-код прилагаем):

зафиксировать ориентацию сайта в мобильном браузере

Надеюсь, что эта идея как зафиксировать ориентацию сайта в мобильном браузере поможет вам решить поставленную перед вами задачу.