我们可以使用媒体查询/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 ??

推荐答案

您可以这样做.这是否是一个好主意，我会让你决定(提示:不是).

You COULD do this. Wether it is a good idea or not I'll let you decide (hint: it isn't).

使用 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%;
}

以这种方式旋转 body 不会导致它的宽度和高度更新以适应它的新方向，所以我们必须用 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屋！