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

Question

[Илья Савельев]

Всем привет.

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

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

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

В общем кто что посоветует? (без флуда).

Comments

[Алексей]

Как вариант - flash поддерживается?

[V Sh.]

А в самом браузере разве нельзя сделать поворот экрана?

[Илья Савельев]

Алексей: нет, к сожалению.

[Илья Савельев]

V Sh.: не видел никогда такого, тем более надо учитывать что там не совсем webkit в полном его понимании, все-таки браузер в ПО телевизора.

[Алексей]

Илья Савельев: Крайний вариант - набор картинок с повернутыми цифрами и несколькими нужными символами.

[Илья Савельев]

Алексей: все текстовые заголовки (типа "Подойти, пожалуйста, к нужному окну") тоже делать картинками? не комильфо это, однако, в наш век CSS.

Answer 1

[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';