移动网站 - 仅强制横向/不自动旋转答案

【问题标题】：Mobile site - force landscape only / no auto-rotate移动网站 - 仅强制横向/不自动旋转
【发布时间】：2012-06-14 01:54:42
【问题描述】：

我的网站有一个移动样式表：

<link rel="stylesheet" href="css/mobile.css" media="handheld">

我还使用 jQuery 来检查移动设备并相应地更改功能。

但我想知道是否有办法强制仅横向并禁用自动旋转？ CSS 或 jQuery 解决方案都可以。

谢谢！

【问题讨论】：

标签： jquery css mobile landscape autorotate

【解决方案1】：

使用媒体查询来测试方向，在纵向样式表中隐藏所有内容并显示应用仅在横向模式下工作的消息。

<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">

我认为是最好的方法

【讨论】：

【解决方案2】：

您不能在网页中强制定向，但您可以在 portarit 模式下建议或阻止内容。

我做了一个adaptation existing script

在你的 html 文件中添加一个 div 元素

<div id="block_land">Turn your device in landscape mode.</div>

然后调整你的 css 以覆盖你的所有页面

#block_land{position:absolute; top:0; left:0; text-align:center; background:white; width:100%; height:100%; display:none;}

然后添加一个小 javascript 来检测方向

function testOrientation() {
  document.getElementById('block_land').style.display = (screen.width>screen.height) ? 'none' : 'block';
}

不要忘记在 onload 和 onorientationchange 中测试方向，也许在你的 body 标签中

<body onorientationchange="testOrientation();" onload="testOrientation();">

让我知道此解决方案是否适合您。

【讨论】：

所以我尝试了一个类似的解决方案，但我遇到的问题是有几个人的方向被锁定。所以，他们不得不解锁真的很烦人。理想情况下，页面只会以横向显示（就像许多游戏应用程序一样）。打算研究使用 CSS 旋转来解决它。

【解决方案3】：

我认为最好的方法是脚本，这样当用户改变时，它就会改变。我对此进行了修改，以便在纵向时旋转您的页面主 DIV，从而强制用户切换。除非他们想侧头：

<script type="text/javascript">
    (function () {
        detectPortrait();
        $(window).resize(function() {
            detectPortrait("#mainView");
        });


        function detectPortrait(mainDiv) {
            if (screen.width < screen.height) {
                $(mainDiv).addClass("portrait_mode");
            }
            else {
                $(mainDiv).removeClass("portrait_mode");
            }
        }
    })();
</script>
<style type="text/css">
    .portrait_mode {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
</style>

【讨论】：

这肯定会破坏任何 JS 动画和页面的移动响应能力。这会给开发者带来更多问题，不能被视为修复。
@WissamEl-Kik 它仍然可以满足 OP 的要求。实际上，OP 要求的内容也会破坏移动响应能力，所以你不能责怪这个答案！不过，它实际上并不需要 JavaScript；使用orientation: portrait 媒体查询触发它也可以。

【解决方案4】：

强制横向方向的简单方法是在您的 css 代码中设置最小-最大宽度，尝试使用此代码

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { 
body {
-webkit-transform: rotate(90deg);
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0; 
}}

希望能解决你的问题。

【讨论】：

【解决方案5】：

我尝试了以下代码，它强制浏览器使用纵向模式：

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />

此代码已在 iPhone 和其他移动设备上测试。

【讨论】：

对不起先生，我认为代码只会阻止用户放大或缩小。在 iphone 4S 的 Safari 和 Android 4.3 的 Chrome 上测试，横向和纵向模式仍然可以。

【解决方案6】：

您可以通知用户他必须改变方向并隐藏屏幕。然后感知方向变化并重新加载页面。以下代码应放在页面模板的末尾或页脚中。

这是为了通知用户他应该旋转设备，当页面处于纵向状态时它会隐藏内容。您应该确认“.content”是您页面上的正确选择器。

if(screen.availHeight > screen.availWidth){
    jQuery( ".content" ).css( "display", "none" );
    var newLine = "\r\n"
    var msg = "Please use Landscape!"
    msg += newLine;
    msg += "(Turn your phone 90 degrees)";
    msg += newLine;
    msg += "and wait a seconds,";   
    msg += newLine;
    msg += "for the page to reload.";   
    alert(msg);
}

这将在用户旋转设备时重新加载隐藏页面。

jQuery(window).on("orientationchange",function(){
  location.reload();
});

【讨论】：