手机网站 - 力景观只/无自动旋转手机网站 - 力景观只/无自动旋转(Mobile site - f

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

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

我认为是最好的aproach

Answer 2:

你不能强迫在网页方向，但你可以建议或阻止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 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; 
}}

希望解决您的问题。

文章来源: Mobile site - force landscape only / no auto-rotate