Como controlar tela orientação para o iPhone no aplicativo web
-
18-09-2019 - |
Pergunta
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!
Solução
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;
}
}
Outras dicas
1/2) Você tentou -web-transform
? Veja este a Apple
3) Eu acho que você não pode inibir a auto-rotação
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 */
}