手机网站 - 唯一力量景观/无自动旋转

我有了移动样式网站：手机网站 - 唯一力量景观/无自动旋转

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

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

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

谢谢！

来源

2012-06-11 Joey

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

我在HTML文件中所做的existing script

一个adaptation添加一个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();">

让我知道，如果这个解决方案适用于你。

来源

2012-06-11 09:25:28 DoubleYo

所以我尝试了类似的解决方案，我遇到的问题是几个人锁定了他们的方向。所以，他们必须解锁真的很烦人。理想情况下，该页面会显示在横向上（与许多游戏应用程序一样）。去研究使用CSS旋转来解决它。 – gman

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

<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

来源

2012-10-03 16:49:40 daver

我认为最好的办法是脚本，这样当用户的变化，它的变化。我修改了这个，使它在纵向旋转你的页面主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-17 02:12:51

这肯定会破坏任何JS动画和页面的移动响应。这会给开发者带来更多问题，不能被视为一种修复。 –

@ WissamEl-Kik它仍然做OP的要求。实际上，OP所要求的也会打破移动响应，所以你不能责怪这个答案！虽然它并不真的需要JavaScript，用'orientation：portrait'媒体查询来触发这个问题也可以。 –

我尝试下面的代码，它迫使浏览器使用人像模式：

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

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

来源

2014-09-29 08:10:19

对不起，先生，我认为代码只能防止用户放大或缩小。在iPhone 4S上使用Safari浏览器进行测试，在Android 4.3上使用Chrome浏览器，横向和纵向模式仍然可以使用。 –

简单的方法来强制横向设置的最小 - 最大宽度在你的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-24 17:14:05

手机网站 - 唯一力量景观/无自动旋转

回答

相关问题