移动网站 – 强制风景只/不自动旋转

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

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

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

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

谢谢!

5 Solutions collect form web for “移动网站 – 强制风景只/不自动旋转”

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

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

我认为是最好的方法

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

我对现有的脚本进行了改编

在你的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'; } 

不要忘记testingonload和onorientationchange方向,也许在你的身体标签

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

让我知道这个解决scheme是否适合你。

我认为最好的方法是脚本,以便当用户改变时,改变。 我修改了这个,使它在纵向旋转你的页面主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> 

我试了下面的代码,它强制浏览器使用肖像模式:

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

此代码已在iPhone和其他移动设备上进行过testing。

简单的方法来强制横向方向设置你的最小宽度在你的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; }} 

希望解决你的问题。

  • 在Safari中禁用弹性滚动
  • 用JavaScript生成内存中的XML文档
  • ajax和jquery有什么区别,哪个更好?
  • jQuery:获取jQuery隐藏元素的高度
  • 如何通过JQuery Post传递一个Javascript数组,以便通过PHP $ _POST数组访问它的所有内容?
  • JQuery / Javascript:检查是否存在var
  • jQuery等价于JavaScript的addEventListener方法
  • 用于“select”元素上的“向下箭头”的CSS?