Isso se expande em uma resposta anterior. A melhor solução que encontrei é criar um atributo CSS inócuo que só aparece se uma consulta de mídia CSS3 for atendida e fazer o teste JS para esse atributo.
Por exemplo, no CSS, você teria:
@media screen only and (orientation:landscape)
{
// Some innocuous rule here
body
{
background-color: #fffffe;
}
}
@media screen only and (orientation:portrait)
{
// Some innocuous rule here
body
{
background-color: #fffeff;
}
}
Você então acessa o JavaScript (estou usando o jQuery para diversão). As declarações de cores podem ser estranhas, então você pode querer usar outra coisa, mas esse é o método mais infalível que eu encontrei para testá-lo. Você pode usar o evento de redimensionamento para ativar a alternância. Coloque tudo junto para:
function detectOrientation(){
// Referencing the CSS rules here.
// Change your attributes and values to match what you have set up.
var bodyColor = $("body").css("background-color");
if (bodyColor == "#fffffe") {
return "landscape";
} else
if (bodyColor == "#fffeff") {
return "portrait";
}
}
$(document).ready(function(){
var orientation = detectOrientation();
alert("Your orientation is " + orientation + "!");
$(document).resize(function(){
orientation = detectOrientation();
alert("Your orientation is " + orientation + "!");
});
});
A melhor parte disso é que, ao escrever esta resposta, ela não parece ter efeito nas interfaces da área de trabalho, pois elas (geralmente) não (parecem) passam nenhum argumento para orientação à página.