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

Question

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

Answer 1

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

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

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

Answer 2

@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 кредит.

Update

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

Другого Update

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

Answer 3

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

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

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

Answer 4

я должен был играть с шириной основных моих контейнеров:

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