解决方法
你可以做到这一点.不管它是不是一个好主意我会让你决定(提示：它不是).
使用CSS检查纵向方向,并在必要时旋转主体：
@media screen and (orientation:portrait) {
body {
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
以这种方式旋转主体不会导致它的宽度和高度更新以适应它的新方向,所以我们必须使用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之外,没有进行任何测试.
