我们可以使用媒体查询/ js / jquery默认情况下以横向模式打开手机/平板电脑的网页吗？ [英] Can we make our webpage open defaultly in landscape mode for mobile/tablets using media query/js/jquery?

问题描述

在移动设备或平板电脑中，即使屏幕方向为关闭，也可以使用css3媒体查询或jquery，以横向模式打开我的网页。

Is it possible to make my web page open default in landscape mode in a mobile or tablet even if the orientation of screen is off using css3 media query or jquery ??

推荐答案

你可以这样做。

使用CSS检查纵向方向，如有必要，旋转主体。

Check for portrait orientation with CSS and rotate the body if necessary:

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

旋转正文以这种方式不会导致它的宽度和高度更新，以适应它的新方向，所以我们必须纠正这与JQuery：

rotating the body in this way will not cause it's width and height to update to suit it's new orientation so we will have to correct this with 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 （调整预览面板大小）

---

DEMO (resize the preview panel)

免责声明：未在Chrome中进行任何测试。

DISCLAIMER: Not tested in anything but Chrome.

这篇关于我们可以使用媒体查询/ js / jquery默认情况下以横向模式打开手机/平板电脑的网页吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！