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

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

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

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

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

谢谢!

  • jQuery - 检测隐藏的input字段上的值更改
  • 如何使用JavaScript查找父元素
  • 由于错误的MIMEtypes,Chrome拒绝执行AJAX脚本
  • 问题返回JSON值
  • 如何添加项目到jQuery中的数组?
  • 相反的追加在jQuery中
  • Google Closure Library提供的jQuery是什么?
  • 我怎样才能禁用从一个函数jQuery对话框中的button?
  • 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; }} 

    希望解决你的问题。