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

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

<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; }} 

希望解决你的问题。

  • JQuery,如何find具有类似ID的div列表
  • 如何使用jQuery $ .getScript()方法包含多个js文件
  • 使用jQuery .offset()获取和设置位置
  • 如何绕过Access-Control-Allow-Origin?
  • 什么是$(function(){}); 做?
  • 如何使用JavaScript代码获取浏览器宽度?
  • jQuery的form.serialize和其他参数
  • 如何自动更改div内的文字大小?
  • jQuery的UI - Draggable不是一个函数?
  • 将jQuery UI对话框自动调整为由ajax加载的内容的宽度
  • jQuery可以获得与元素相关的所有CSS样式吗?