css - 我们可以使用媒体查询/js/jquery 让我们的网页在手机/平板电脑的横向模式下默认打开吗？

Question

即使使用 css3 媒体查询或 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 外，未在任何软件中进行测试。