jQuery 移动站点 - 仅强制横向/无自动旋转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10975387/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mobile site - force landscape only / no auto-rotate
提问by Joey
I have a site that has a mobile stylesheet:
我有一个包含移动样式表的网站：
<link rel="stylesheet" href="css/mobile.css" media="handheld">
I'm also using jQuery to check for mobile devices and alter functionality accordingly.
我还使用 jQuery 检查移动设备并相应地更改功能。
But I want to know if there is a way to force landscape-only orientation and disable auto-rotate? Either a CSS or a jQuery solution would be fine.
但我想知道是否有办法强制仅横向方向并禁用自动旋转？CSS 或 jQuery 解决方案都可以。
Thanks!
谢谢！
回答by daver
Use media queries to test the orientation, in the portrait stylesheet hide everything and show a message that the app only works on landscape mode.
使用媒体查询来测试方向，在纵向样式表中隐藏所有内容并显示一条消息，表明该应用程序仅适用于横向模式。
<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)">
I think is best aproach
我认为是最好的方法
回答by Yoann
You can't force orientation in web page, but you can suggest or block content in portarit mode.
您不能在网页中强制定向，但您可以在 portarit 模式下建议或阻止内容。
I made a adaptationof a existing script
in your html file add a div element
在你的 html 文件中添加一个 div 元素
<div id="block_land">Turn your device in landscape mode.</div>
Then adapt your css to cover all your page
然后调整您的 css 以覆盖您的所有页面
#block_land{position:absolute; top:0; left:0; text-align:center; background:white; width:100%; height:100%; display:none;}
Then add a litle javascript to detect orientation
然后添加一点 javascript 来检测方向
function testOrientation() {
document.getElementById('block_land').style.display = (screen.width>screen.height) ? 'none' : 'block';
}
Don't forget to test the orientation in the onload and onorientationchange, maybe in your body tag
不要忘记在 onload 和 onorientationchange 中测试方向，也许在你的 body 标签中
<body onorientationchange="testOrientation();" onload="testOrientation();">
Let me know if this solution works for you.
让我知道此解决方案是否适合您。
回答by Thomas Watson
I think the best approach is the script so that when the user changes, it changes. I modified this so that it rotates your page main DIV when in portrait, forcing the user to switch. Unless they want to tilt their head sideways:
我认为最好的方法是脚本，这样当用户改变时，它就会改变。我修改了它，以便它在纵向时旋转您的页面主 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>
回答by Wissam El-Kik
I tried the following code and it forced the browser to use the portrait mode:
我尝试了以下代码，它强制浏览器使用纵向模式：
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
This code has been tested on an iPhone and on another mobile device.
此代码已在 iPhone 和另一台移动设备上进行了测试。
回答by Rizky Ariestiyansyah
Simple way to force landscape orientation is set your min-max width in your css code, try using this code
强制横向方向的简单方法是在 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;
}}
hope solve your problem.
希望能解决你的问题。
