Como controlar tela orientação para o iPhone no aplicativo web

Question

Eu tenho uma página web muito básico que usos Flot para criar um gráfico baseado canvas (semelhante ao que SO usa para o gráfico de reputação).

No caso de um monitor de PC, que deveria simplesmente saída normalmente, com uma (eixo dos x) a largura sendo 1,6 vezes a altura.

Mas para iPhones, eu gostaria que, ao invés de ter que transbordam na orientação "retrato", a página padrão para orientação paisagem, incentivando (ou forçar) ao utilizador transformar o seu telefone para ver o gráfico como usuários de PC que .

Então, minhas perguntas são:

1) Existe uma maneira (usando CSS, JS, ou simplesmente Tag principais HTML) para ter a tela de girar 90 graus na detecção de uma orientação do retrato?

2) Existe uma maneira, em geral, aos elementos rodar / objetos, independentemente de quem está vendo isso?

3) Existe uma maneira de evitar o comportamento padrão do iPhone de girar o conteúdo quando o dispositivo é girado? Obviamente, eu quero que o usuário gire o dispositivo ao ver que ele mostrou-se para o lado, mas eu não quero o gráfico para virar e ainda estar de lado quando ligar o telefone, provocando-lhes continuar a virar o telefone e nunca ficando o gráfico para segurar ainda.

Obrigado!

Answer 1

Algo como isso.

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) Você tentou -web-transform? Veja este a Apple

3) Eu acho que você não pode inibir a auto-rotação

Answer 3

Uma outra opção é alvejar seu CSS com o seguinte código:

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

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