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

Часто, для від розробника вимагає зробити сайт, який буде виглядати на всіх пристроях однаково. Іноді доходить до маразму, але це можливо: зафіксувати орієнтацію сайту в мобільному браузері.

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

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

Як це виглядає в коді (зафіксувати орієнтацію браузера):

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

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

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

Сподіваюся, що ця ідея як зафіксувати орієнтацію сайту в мобільному браузері допоможе вам вирішити поставлену перед вами завдання.

• 
  Поворот тексту CSS. просто
• 
  Проблема з фоном при анімації на ...
• 
  Як відключити виділення номера ...