Как мне показать контент в портретном режиме в окне браузера? - PullRequest
Новая
       11

Как мне показать контент в портретном режиме в окне браузера?

0 голосов
/ 14 декабря 2018

В основном я хочу сказать браузеру, что учитывает и отображает текущий контент в портретном режиме.Есть ли способ, может быть, используя CSS, JavaScript, jQuery или любую другую библиотеку / фреймворк?Это специально для настольных компьютеров (особенно на телевизоре), а не для мобильных телефонов.Я не хочу менять ориентацию из настроек устройства, а скорее изменить ориентацию содержимого / окна браузера в целом.

Я пытался вращать все тело, используя CSS, но ширина содержимого выходит за пределы области просмотра.

Из того, что я исследовал и обнаружил, было следующее: https://w3c.github.io/screen-orientation/, но я читал, что это будетработает только в браузере FF на мобильном телефоне

1 Ответ

0 голосов
/ 14 декабря 2018

То, что вы описали, называется адаптивным дизайном.В вашем случае использования, как представляется, необходимо отображать контент определенным образом с учетом конкретного макета.Поскольку вы упомянули , в частности, телевизор , то здесь предполагается, что область просмотра с соотношением сторон 16: 9.

Чтобы удовлетворить ваш сценарий использования, вы можете использовать функцию CSS, которая называется Media Queries, добавиввсе стили вашего телепорта в этом блоке: 

@media screen  and (aspect-ratio: 16/9) {
     /* Styles to display content on TV go here */
 }

Используйте правила стиля в этом блоке, чтобы контент выглядел так, как вам нужно на вашем телевизоре.Вы можете проверить это в большинстве браузеров Dev Tools, заставив браузер с соотношением сторон экрана 16: 9.Когда вы это сделаете, вы сможете увидеть применение этих стилей.

Ссылка: Медиа-запросы

РЕДАКТИРОВАТЬ:

В пояснениях к комментариям ниже приведено решение конкретной проблемы.Я оставляю комментарии выше на случай, если кто-то придет сюда и посчитает этот совет полезным. 

let container = document.getElementById('container');
document.querySelector('button').addEventListener('click', turn);

function turn() {
  container.classList.toggle('turn');
}
#container {
  width: 300px;
  height: 500px;
  border: 1px solid;
}

#container.turn {
  transform: rotate(270deg);
  margin-left: 150px;
}

#container img {
  display: block;
  margin: 15px auto;
}

#container p {
  padding: 15px;
}

button {
  display: block;
  width: 50%;
  margin: 0 auto;
}
<div id="container" class="turn">
  <img src="https://via.placeholder.com/150">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <button>Switch orientation</button>
</div>
...