floydman-89
@floydman-89
В постоянном изучении...

Как сделать верстку для вертикально-расположенного телевизора?

Всем привет.

Ситуация следующая - нужно сверстать главный экран электронной очереди (номер талона - окно) на повернутом на 90 градусов телевизоре. В телевизоре(Samsung) используется стандартный веб-браузер webkit. Поворот экрана осуществили не программно, а физически (просто развернули его). И вот под такую ситуацию надо сверстать.

Кто может сориентировать каким способом верстать? Уже пробовал несколько способов:

  1. writing-mode результата не дал - браузер не поддерживает CSS3
  2. transform: rotate (90deg) пока не удается достичь желаемого результата. Получаются костыли и грабли, а также проблемы с определением высоты и ширины повернутого экрана. По логике, получается что при повернутом физически телевизоре имеем ширину экрана равную 100vh, а высоту соответственно 100vw. Но данный хак не сработал, все перекосило к чертикам.


В общем кто что посоветует? (без флуда).
  • Вопрос задан
  • 274 просмотра
Решения вопроса 1
maxminimus
@maxminimus
просто или ничего
пили transform: rotate (90deg) - должно работать
твоя проблема непонятна
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
trushka
@trushka
Может, там какой-то древний браузер, не понимающий vw? Вот в android 4.1, например, такой.. Но если всё же понимает, то можно так
html {width: 100vw; height: 100vh; overflow: hidden}
body: {
    width: 100vh; height: 100vw;
    margin: 50vh auto;  overflow: auto;
    transform: translateY(-50%) rotate(90deg)
}
Если таки не понимает vw vh, то тогда надо в css везде на % поменять, а размеры для body задать скриптом
document.body.style.height=window.innerWidth+'px';
document.body.style.width=window.innerHeight+'px';
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы