23

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

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

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

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

谢谢！

4

6 回答 6

19

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

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

我认为是最好的方法

于 2012-10-03T16:49:40.863 回答
16

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

我对现有脚本进行了改编

在你的 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();">

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

于 2012-06-11T09:25:28.830 回答
4

我认为最好的方法是脚本，这样当用户改变时，它就会改变。我对此进行了修改，以便在纵向时旋转您的页面主 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>
于 2014-02-17T02:12:51.580 回答
1

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

希望能解决你的问题。

于 2014-12-24T17:14:05.887 回答
0

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

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

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

于 2014-09-29T08:10:19.027 回答
0

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

这是为了通知用户他应该旋转设备，当页面处于纵向状态时它会隐藏内容。您应该确认“.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();
});
于 2021-08-02T05:04:12.340 回答