заставить веб-сайт отображаться только в ландшафтном режиме

Я хочу, чтобы мой сайт отображался только в ландшафтном режиме, возможно ли это? Не имеет значения, в какой ориентации находится устройство в руке пользователя, но веб-сайт всегда будет в ландшафтном режиме. Я видел, как приложение для iPhone работает так, но можно ли это сделать для веб-сайта?


javascript html mobile-browser
person coure2011    schedule 05.01.2012    source источник
comment
Хороший вопрос, но готов поспорить, что ответ Невозможен, хотя вы можете обмануть: stackoverflow.com/a/4807047/615754< /а>.   -  person nnnnnn    schedule 05.01.2012
comment
Не совсем. Вы можете подделать его, используя преобразования css, но это уродливо, и я не думаю, что есть способ узнать, перевернуто ли оно на Android. Наверняка это уже обсуждалось здесь.   -  person Dagg Nabbit    schedule 05.01.2012
comment
можно ли заставить веб-сайт иметь минимальную ширину: 320 пикселей? поэтому, если размер экрана имеет более низкое разрешение, пользователю потребуется прокрутить страницу, чтобы просмотреть весь сайт. Или я могу увеличить ширину 240 пикселей до 320 пикселей?   -  person coure2011    schedule 05.01.2012
comment
Я не уверен, насколько полезна эта ссылка для вас, но последние функции [январь 2020 г.] предлагают новый API для блокировки ориентации от W3C w3c.github.io/ориентация экрана   -  person Sarath Sajan    schedule 09.03.2020

Ответы (4)


arrow_upward
117
arrow_downward

@Golmaal действительно ответил на это, я просто немного многословен.

<style type="text/css">
    #warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }
</style>

....

<div id="wrapper">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>

У вас нет контроля над пользователем, перемещающим ориентацию, однако вы можете хотя бы отправить ему сообщение. Этот пример скроет оболочку в портретном режиме и покажет предупреждающее сообщение, а затем скроет предупреждающее сообщение в альбомном режиме и покажет портрет.

Я не думаю, что этот ответ лучше, чем @Golmaal, только комплимент ему. Если вам нравится этот ответ, обязательно отдайте должное @Golmaal.

Обновить

В последнее время я много работал с Cordova, и оказалось, что вы МОЖЕТЕ управлять им, когда у вас есть доступ к нативным функциям.

Еще одно обновление

Так что после выпуска Кордовы это действительно ужасно в конце. Лучше использовать что-то вроде React Native, если вам нужен JavaScript. Это действительно потрясающе, и я знаю, что это не чистый Интернет, но чистый веб-опыт на мобильных устройствах не удался.

person King Friday    schedule 05.01.2012
comment
сделал мой день! это действительно удобный скрипт для включения ландшафтного режима на небольших устройствах с добавлением приятного сообщения. - person dhruvpatel; 04.10.2016
comment
вы получили большую часть похвалы;) +1d за ваш хорошо описанный ответ и @Golmaal .. - person Hitesh Misro; 21.10.2016
comment
Действительно полезно, спасибо! Стоит отметить, что это не работает, если вы вставляете его в отдельную таблицу стилей. - person Mmm; 27.09.2018
comment
Ваш ответ лучше, чем тот, на который вы ссылаетесь. Вы предоставляете реальное решение и рекомендуете легко реализуемое предупреждение вместо чего-то более креативного и проблематичного. Другой ответ, возможно, вдохновил вас, но это было более или менее просто удивление вслух. Было бы лучше, если бы в комментарии упоминалось о существовании свойства условной группы orientation. - person Vince; 30.10.2020

arrow_upward
46
arrow_downward

Пока я сам ждал бы здесь ответа, интересно, можно ли это сделать через CSS:

@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}
person Golmaal    schedule 05.01.2012

arrow_upward
36
arrow_downward

Попробуйте это. Возможно, вам больше подойдет

#container { display:block; }
@media only screen and (orientation:portrait){
  #container {  
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (orientation:landscape){
  #container {  
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}
<div id="container">
    <!-- your html for your website -->
    <H1>This text is always in Landscape Mode</H1>
</div>

Это автоматически будет управлять равномерным вращением.

person Community    schedule 18.05.2014
comment
Умно, но не работает. Большая часть страницы недоступна при повороте, потому что поворачивается только содержимое, а не сам браузер. - person Graham; 18.07.2014
comment
Это нарушит любую анимацию и, вероятно, уничтожит мобильную отзывчивость страницы. - person Wissam El-Kik; 29.09.2014

arrow_upward
2
arrow_downward

Мне пришлось поиграть с шириной моих основных контейнеров:

html {
  @media only screen and (orientation: portrait) and (max-width: 555px) {
    transform: rotate(90deg);
    width: calc(155%);
    .content {
      width: calc(155%);
    }
  }
}
person Kraken    schedule 13.03.2017
comment
хорошая идея .. какие-либо артефакты / шум при переключении между портретом / пейзажем? - person hko; 03.03.2019