Это расширяет предыдущий ответ. Лучшее решение, которое я нашел, - создать безобидный атрибут CSS, который появляется только в случае удовлетворения медиазапроса CSS3, а затем выполнить тест JS для этого атрибута.
Так, например, в CSS вы должны иметь:
@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;
}
}
Затем вы переходите на JavaScript (я использую jQuery для забавы). Декларации цвета могут быть странными, поэтому вы можете использовать что-то еще, но это самый надежный метод, который я нашел для тестирования. Затем вы можете просто использовать событие изменения размера, чтобы узнать о переключении. Соберите все вместе для:
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 + "!");
});
});
Лучшая часть этого заключается в том, что на момент написания этого ответа он не оказывал никакого влияния на интерфейсы рабочего стола, поскольку они (как правило) (кажется) не передают никаких аргументов для ориентации страницы .