85

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

javascript html mobile-browser

— coure2011
источник

3

Хороший вопрос, но я готов поспорить, что ответ - «Невозможно», хотя вы можете обмануть: stackoverflow.com/a/4807047/615754 .

— nnnnnn

На самом деле, нет. Вы можете как бы подделать его с помощью преобразований css, но это уродливо, и я не думаю, что есть способ узнать, перевернут ли он на Android. Совершенно уверен, что это уже обсуждалось здесь раньше.

— Dagg Nabbit

1

Можно ли заставить веб-сайт иметь минимальную ширину: 320 пикселей? поэтому, если размер экрана имеет меньшее разрешение, пользователю потребуется прокрутить страницу, чтобы просмотреть весь сайт. Или можно увеличить ширину с 240 пикселей до содержимого 320 пикселей?

— coure2011 05

Я не уверен, насколько полезной может быть эта ссылка для вас, но последние [январь 2020] функции предлагают новый API для блокировки ориентации от W3C w3c.github.io/screen-orientation

— Сарат Саджан,

117

@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, и оказалось, что вы МОЖЕТЕ управлять им, если у вас есть доступ к встроенным функциям.

Другое обновление

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

— Джейсон Себринг
источник

сделал мой день! это действительно удобный скрипт для принудительного использования ландшафтного режима на небольших устройствах с красивым сообщением.

— dhruvpatel 04

вы получили большую часть признательности;) + 1d за ваш хорошо описанный ответ и @Golmaal ..

— Hitesh Misro

Действительно полезно, спасибо! Стоит отметить, что это не работает, если вы поместите его в отдельную таблицу стилей.

— Ммм

Ваш ответ лучше, чем тот, на который вы ссылаетесь. Вы предоставляете реальное решение и рекомендуете легко реализуемое предупреждение вместо чего-то более творческого и проблемного. Другой «ответ» мог бы вас вдохновить, но это было более или менее просто вслух. Было бы лучше в качестве комментария, упоминающего о существовании orientationсвойства условной группы.

— Винс

46

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

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

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

— Голмаал
источник

35

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

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

Развернуть фрагмент

Это автоматически обеспечит равномерное вращение.

— г-н А
источник

7

Умно, но на самом деле не работает. Большая часть страницы становится недоступной при повороте, потому что вращается только контент, а не сам браузер.

— Грэм

2

Это нарушило бы любую анимацию и, вероятно, нарушило бы мобильность страницы.

— Виссам Эль-Кик

2

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

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

— Kraken
источник

хорошая идея .. есть ли артефакты / шумы при переключении между портретом / пейзажем?

— hko 03

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

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