Как управлять ориентацией экрана для iPhone в веб-приложении

Question

У меня есть очень простая веб-страница, в которой используется флот для создания графика на основе canvas (аналогично тому, как SO использует для графа репутации).

В случае дисплея ПК он должен просто выводиться нормально, при этом ширина (по оси x) будет в 1,6 раза больше высоты.

Но для iPhones мне бы хотелось, если бы вместо переполнения в ориентации «портрет», страница по умолчанию была ориентирована на альбомную ориентацию, поощряя (или вынуждая) пользователя повернуть свой телефон, чтобы увидеть график в качестве пользователей ПК бы.

Так что мои вопросы:

1) Есть ли способ (с помощью CSS, JS, или просто теги голову HTML), чтобы холст повернуть на 90 градусов по обнаружению портретной ориентации?

2) Есть ли способ, в общем, повернуть элементы/объекты, независимо от того, кто его просматривает?

3) Есть ли способ избежать поведения iPhone по умолчанию при вращении содержимого при повороте устройства? Очевидно, я хочу, чтобы пользователь вращал устройство, увидев, что он появился сбоку, но я не хочу, чтобы график перевернулся, и STILL будет боком, когда они поворачивают телефон, дразня их, чтобы продолжать переворачивать телефон и никогда не получать график останется неподвижным.

Спасибо!

Answer 1

Нечто подобное.

window.onorientationchange = function() { 

    var orientation = window.orientation; 
    switch(orientation) { 
    case 0: 

    document.body.setAttribute("class","portrait"); 

    break; 

    case 90: 

    document.body.setAttribute("class","landscapeLeft"); 

    document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right)."; 
    break; 

    case -90: 

    document.body.setAttribute("class","landscapeRight"); 

    document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left)."; 
    break; 
    } 
} 

Answer 2

1/2) Вы попробовали -web-transform? Смотрите это Apple web page

3) Я думаю, что вы не можете препятствовать автоповорот

Answer 3

Другим вариантом является ориентировать CSS с помощью следующего кода:

/* Portrait */ 
@media screen and (max-width: 320px){ 
    /* Place your style definitions here */ 
} 

/* Landscape */ 
@media screen and (min-width: 321px){ 
    /* Place your style definitions here */ 
}