文章/答案/技术大牛

发布

社区首页 >问答首页 >移动站点-仅横向/无自动旋转

问移动站点-仅横向/无自动旋转
EN

Stack Overflow用户

提问于 2012-06-11 14:34:12

回答 6查看 81.6K关注 0票数 23

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

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

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

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

谢谢!

jquery

css

mobile

landscape

autorotate

回答 6

Stack Overflow用户

发布于 2012-10-04 00:49:41

使用媒体查询来测试方向，在肖像样式表中隐藏所有内容，并显示一条消息，表明应用程序只能在横向模式下工作。

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

我认为最好的方法是

票数 19

Stack Overflow用户

发布于 2012-06-11 17:25:29

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

我做了一个existing script的adaptation

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

如果这个解决方案对你有效，请让我知道。

票数 16

Stack Overflow用户

发布于 2014-02-17 10:12:52

我认为最好的方法是脚本，这样当用户改变时，它也会改变。我对此进行了修改，以便在纵向模式下旋转页面主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>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10975387

复制

相似问题

问移动站点-仅横向/无自动旋转
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问移动站点-仅横向/无自动旋转EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问移动站点-仅横向/无自动旋转
EN