Question

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

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

我也在使用jQuery来检查移动设备并相应地改变功能。

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

谢谢！

Answer 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)">

我认为最好的方法

Answer 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;}

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

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

不要忘记测试onload和onorientationchange中的方向，可能在你的身体标签中

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

如果此解决方案适合您，请告诉我。

Answer 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>

Answer 4

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

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

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

Answer 5

强制横向方向的简单方法是在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; 
}}

希望解决你的问题。

Answer 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();
});

移动网站 - 仅强制横向/无自动旋转

6 个答案: