我们可以使用媒体查询/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（调整预览面板大小）

免责声明：除了 Chrome 之外，未在任何其他环境中进行测试。