移动网站 – 强制风景只/不自动旋转
我有一个网站有一个移动样式表：
<link rel="stylesheet" href="css/mobile.css" media="handheld"> 我也使用jQuery来检查移动设备并相应地改变function。
但是我想知道是否有办法强制横向定向并禁用自动旋转？ 无论是CSS或jQuery解决scheme都可以。
谢谢！
使用媒体查询来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; }}
希望解决你的问题。
