我有一个拥有移动设备样式表的网站：
<link rel="stylesheet" href="css/mobile.css" media="handheld">
我还使用jQuery来检测移动设备并相应地修改功能。
但我想知道是否有一种方法可以强制横屏方向并禁用自动旋转？无论是CSS还是jQuery解决方案都可以。
谢谢！
移动网站-强制横屏/禁止自动旋转
24
- Joey
6个回答
19
使用媒体查询来测试设备方向，在纵向样式表中隐藏所有内容并显示一个消息，说明应用只能在横向模式下工作。
<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)">
我认为这是最佳方法
- daver
16
你不能强制网页方向，但可以建议或阻止横屏模式下的内容。
我对现有脚本进行了适应。在你的HTML文件中添加一个div元素。请参考适应脚本和现有脚本。
然后调整你的CSS以覆盖整个页面。
我对现有脚本进行了适应。在你的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';
}
不要忘记在onload和onorientationchange中测试方向，也许在您的body标签中。
<body onorientationchange="testOrientation();" onload="testOrientation();">
如果这个解决方案对您有用，请告诉我。
- Yoann
1
所以我尝试了一个类似的解决方案，但遇到的问题是有几个人的方向被锁定了。这对他们来说真的很烦人，因为他们必须解锁。理想情况下，页面应该像许多游戏应用程序一样只显示横向。我将研究使用CSS旋转来解决它。 - gman
4
我认为最好的方法是使用脚本，以便在用户更改时它也随之更改。我修改了这个脚本，使得在竖屏模式下旋转页面的主要 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>
- Thomas Watson
2
1这肯定会破坏任何JS动画和页面的移动响应性。它会给开发者带来更多问题，不能被视为一种解决方案。 - Wissam El-Kik
2@WissamEl-Kik 它仍然可以满足原帖的要求。而且，原帖所要求的也会破坏移动响应性，所以你不能因为这个答案而责怪它！不过它并不真正需要 JavaScript；使用
orientation: portrait 媒体查询来触发它也可以起作用。 - Mr Lister1
强制横屏的简单方法是在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;
}}
希望能解决您的问题。
- Rizky Ariestiyansyah
0
您可以通知用户更改方向并隐藏屏幕。然后感应方向变化并重新加载页面。 以下代码应放置在页面模板的末尾或页脚。
这是为了告知用户应旋转设备，当页面处于纵向状态时，它会隐藏内容。您应确认“.content”是页面上正确的选择器。
if(screen.availHeight > screen.availWidth){
jQuery( ".content" ).css( "display", "none" );
var newLine = "\r\n"
var msg = "Please use Landscape!"
msg += newLine;
msg += "(Turn your phone 90 degrees)";
msg += newLine;
msg += "and wait a seconds,";
msg += newLine;
msg += "for the page to reload.";
alert(msg);
}
当用户旋转设备时，这将重新加载隐藏的页面。
jQuery(window).on("orientationchange",function(){
location.reload();
});
- Raphael Wiener
-1
我尝试了以下代码，它强制浏览器使用竖屏模式：
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
这段代码已在iPhone和另一台移动设备上进行了测试。
- Wissam El-Kik
1
6先生，不好意思，我认为这段代码只能防止用户在Safari iPhone 4S和Android 4.3的Chrome浏览器中进行缩放。无论是横屏还是竖屏模式都可以使用。 - JK ABC
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接