Как принудительно заставить браузер мобильного устройства открывать сайт в альбомной ориентации?

Question

[dimasibirak]

Суть вопроса,есть вот такой сайт

Заказчик просит чтоб дизайн сохранился на моб.устройствах, дизайн сохраняется в альбомнос варианте,если же моб.устройство в книжном варианте сайт на пол экрана,вопрос в чем,можно ли принудительно заставить сайт отображаться только в альбомной версии,или что можно сделать?

Comments

[aarty20]

можно обьяснить заказчику, что мобильная версия не для красивого дизайна, а для быстрого поиска нужной информации с мобильного устройства :)

[Moskus]

Нужно объяснить заказчику, что он идиот. Во-первых, HTML вообще изначально сделан для того, чтобы каждое клиентское устройство отображало его в соответствии со своими возможностями, а не так, как захотел какой-то придурок. Во-вторых, то, что на картинке - что угодно, но не сайт для мобильных устройств.

[aarty20]

Moskus: я ж тоже самое сказал, только в более лояльной форме :-)

[Ярослав Иванов]

Минимальную ширину укажите и все. Через viewport или враппер поставьте.

[Moskus]

aarty20: не вижу смысла быть лояльным к заказчику-идиоту, которого вы не знаете.

[dimasibirak]

Солидарен с вами коллеги,но что говорить если тз на сайт было следующего содержания:
1.Лучики солнца чтоб крутились при наведении
2.Бабочки чтоб махали крыльями при наведении
3.3D каруселька по середине
4.Сайт должен влазить в экран без скролла.

Все,не считая еще 500 пунктов,которые всплыли в процессе разработки.

Answer 1

[marrs]

https://www.w3.org/TR/screen-orientation/

Comments

[dimasibirak]

Плохо что я не знаю английский,нашел на эту тему русскоязычную статью,пробовал не работает,то-ли у меня руки кривые,то-ли Попов что-то не то написал

[marrs]

dimasibirak: Пробуй, для андроедов должно работать.
Создаешь manifest.json с содержимым
{
"display": "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
"orientation": "landscape", /* Could be "landscape" or "portrait" */
}
подключаешь

Подробнее
https://developers.google.com/web/updates/2014/11/...

Другие методы:
css - тут советовали media: orientation, но насколько мне известно, эти запросы уже не работают.
js -
document.addEventListener("orientationchange", function(event){
switch(window.orientation)
{
case -90: case 90:
/* landscape mode - убрать класс с transform: rotate(-90deg); */
break;
default:
/* portrait mode - присвоить класс с transform: rotate(-90deg); */
}
});

[marrs]

не дал вставить тег, manifest подключаешь link rel="manifest" href="manifest.json" естественно обрамляешь тегами

Answer 2

[xmoonlight]

Просто можно через css-media-запрос:

@media all and (orientation: portrait) {
	html,body {
                transform: rotate(-90deg);
                transform-origin: left top;
                width: 100vh;
	}
}

Советую почитать здесь