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