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

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

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

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

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

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

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

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

Спасибо!


iphone css flot screen-orientation webpage
person Anthony    schedule 10.12.2009    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Что-то вроде этого.

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;
  }
}
person Robert Cabri    schedule 10.12.2009
comment
Это определенно то, что я имел в виду. Очень элегантно, поскольку учитывает, как пользователь поворачивает устройство с обнаружением поворота iPhone, так и без него. - person Anthony; 10.12.2009

arrow_upward
1
arrow_downward

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

3) Я думаю нельзя запретить автоповорот

person muccy    schedule 10.12.2009

arrow_upward
0
arrow_downward

Другой вариант — нацелить ваш 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 */
}
person Koen.    schedule 23.12.2010