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

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

Хоча я сам би тут чекав відповіді, мені цікаво, чи можна це зробити за допомогою CSS:

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

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

Спробуйте це. Можливо, вам більше підходить

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

Це автоматично керуватиме рівномірним обертанням.

Мені довелося грати з шириною моїх основних контейнерів:

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