Можем ли мы сделать нашу веб-страницу открытой по умолчанию в ландшафтном режиме для мобильных/планшетов, используя медиа-запрос/js/jquery?

Question

Возможно ли сделать мою веб-страницу открытой по умолчанию в ландшафтном режиме на мобильном телефоне или планшете, даже если ориентация экрана отключена с использованием запроса css3 media или jquery ??

Answer 1

Вы МОЖЕТЕ сделать это. Уэтер это хорошая идея или нет, я позволю тебе решить (намек: это не так).

Проверка для портретной ориентации с помощью CSS и повернуть тело, если необходимо:

@media screen and (orientation:portrait) { 
    body { 
     transform: rotate(-90deg); 
     transform-origin: 50% 50%; 
} 

вращая body таким образом, не будет вызывать это ширина и высота, чтобы обновить, чтобы удовлетворить это новое направление, поэтому мы должны исправить это с JQuery:

function checkOrientation() { 
    var winWidth = $(window).width(); 
    var winHeight = $(window).height(); 

    if (winHeight > winWidth) { 
     $('body').width(winHeight).height(winWidth); // swap the width and height of BODY if necessary 
    } 
} 

checkOrientation(); // Check orientation on page load 

// Check orientation on page resize (mainly for demo as it's unlikely a tablet's window size will change) 
var resizeEnd; 
$(window).resize(function(){ 
    clearTimeout(resizeEnd); 
    resizeEnd = setTimeout(checkOrientation, 100); 
}); 

---

DEMO (resize the preview panel)

---

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Не проверено ни в чем, кроме Chrome.