设备：强制横屏方向（Phonegap JQueryMobile）

Question

我已经搜索了好几天，想找到一种方法，在横屏模式下始终只显示一个特定的jQuery Mobile页面div。

有没有任何示例或想法可以帮助我，我真的很感激。

function forceLandscape() {
    console.log('Starting: forceLandscape ');
    console.log('----------------------------------------------------');


    //    var orientation = window.orientation;
    //    var new_orientation = 0;
    //    switch (orientation) {
    //        case 90:
    //            break;
    //        case -90:
    //            new_orientation = 180
    //            $('body').css({ ".ui-mobile,.ui-mobile .ui-page{min-height:300px} -webkit-transform": "rotate(" + new_orientation + "deg);" });
    //            break;
    //        case 180:
    //            new_orientation = 270;
    //            $('body').css({ ".ui-mobile,.ui-mobile .ui-page{min-height:300px} -webkit-transform": "rotate(" + new_orientation + "deg);" });
    //            break;
    //        case 0:
    //            new_orientation = 90;
    //            $('body').css({ ".ui-mobile,.ui-mobile .ui-page{min-height:300px} -webkit-transform": "rotate(" + new_orientation + "deg);" });
    //            break;
    //        default:
    //            $('body').css({ ".ui-mobile,.ui-mobile .ui-page{min-height:300px} -webkit-transform": "rotate(" + new_orientation + "deg);" });
    //    }  


    console.log('----------------------------------------------------');
    console.log('Completed: forceLandscape ');
}

- lmac34

---

具有横向方向的jQuery移动页面的页面？ - coderslay

<div data-role="page" id="landscape" data-theme="a" data-content-theme="a" data-add-back-btn="true"> 我希望这个 div 始终处于横屏状态，即使手机处于竖屏状态。 - lmac34

Answer 1

这并不是推荐的做法，但你可以这样做：

$('body').css({
   "-webkit-transform": "rotate(90deg)"
   put other browsers here
}); 

或者只在CSS中

#page {
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}

- codaniel

---

我之前遇到过类似的问题，结果很奇怪。 - lmac34

你说的“奇怪”是什么意思？能详细解释一下吗？ - codaniel

感谢您回复我，页面正在旋转，但其高度和宽度不正确。页面保持原始宽度，并在两侧使用白色边框居中显示。 - lmac34

codaniel，你有没有你的CSS工作的例子？我也在使用960网格格式的jQuery Mobile 链接，我觉得这可能是导致问题的原因。 - lmac34

@lmac34 你需要添加一个事件监听器，然后根据 window.height 和 window.width 更改相关内容。 - kaiser