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

Question

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

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

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

Итак, мои вопросы таковы:

1) Есть ли способ (используя CSS, JS или просто теги заголовка HTML) повернуть холст на 90 градусов при обнаружении портретной ориентации?

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

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

Спасибо!

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

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 */
}