заставить сайт показывать только в ландшафтном режиме - PullRequest
Новая
       29

заставить сайт показывать только в ландшафтном режиме

81 голосов
/ 05 января 2012

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

Ответы [ 4 ]

112 голосов
/ 05 января 2012

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

<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. Это действительно потрясающе, и я знаю, что это не чистый веб, а чистый веб-опыт на мобильных устройствах провалился.

44 голосов
/ 05 января 2012

Пока я сам жду здесь ответа, мне интересно, можно ли это сделать с помощью CSS: 

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

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}
31 голосов
/ 18 мая 2014

Попробуйте это Может быть более подходящим для вас 

#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>

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

2 голосов
/ 13 марта 2017

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

html {
  @media only screen and (orientation: portrait) and (max-width: 555px) {
    transform: rotate(90deg);
    width: calc(155%);
    .content {
      width: calc(155%);
    }
  }
}
...