Javascript 阻止移动网页上的设备旋转
当用户在纵向模式下使用移动设备访问我的页面时，是否可以在我的页面上检测（例如使用Javascript），并在用户将手机旋转到横向模式时停止方向更改？我的页面上有一个游戏，只针对纵向显示进行了优化，我不希望它出现在横向显示中。在支持JavaScript的浏览器中，应该可以很容易地确定屏幕是处于横向还是纵向模式。为用户提供禁用此选项或至少警告他们设备旋转将无法正常工作的选项可能会有所帮助 编辑 检测浏览器方向的最简单方法是检查浏览器的宽度与高度。这也有一个好处，那就是你可以知道游戏是否是在一个自然地以横向模式进行的设备上进行的（就像一些像PSP这样的移动设备）。这比尝试禁用设备旋转更有意义 编辑2 Daz已经展示了如何检测设备方向，但检测方向只是解决方案的一半。如果要反转自动方向更改，则需要将所有对象旋转90°或270°/-90°，例如：Javascript 阻止移动网页上的设备旋转,javascript,mobile,mobile-phones,mobile-website,Javascript,Mobile,Mobile Phones,Mobile Website,当用户在纵向模式下使用移动设备访问我的页面时，是否可以在我的页面上检测（例如使用Javascript），并在用户将手机旋转到横向模式时停止方向更改？我的页面上有一个游戏，只针对纵向显示进行了优化，我不希望它出现在横向显示中。在支持JavaScript的浏览器中，应该可以很容易地确定屏幕是处于横向还是纵向模式。为用户提供禁用此选项或至少警告他们设备旋转将无法正常工作的选项可能会有所帮助 编辑 检测浏览器方向的最简单方法是检查浏览器的宽度与高度。这也有一个好处，那就是你可以知道游戏是否是在一个自然地
$(window).bind('orientationchange resize', function(event){
if (event.orientation) {
if (event.orientation == 'landscape') {
if (window.rotation == 90) {
rotate(this, -90);
} else {
rotate(this, 90);
}
}
}
});
function rotate(el, degs) {
iedegs = degs/90;
if (iedegs < 0) iedegs += 4;
transform = 'rotate('+degs+'deg)';
iefilter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+iedegs+')';
styles = {
transform: transform,
'-webkit-transform': transform,
'-moz-transform': transform,
'-o-transform': transform,
filter: iefilter,
'-ms-filter': iefilter
};
$(el).css(styles);
}
无论如何，我仍然建议只显示一条消息，要求用户以纵向模式玩游戏。您可以使用screenSize.width和screenSize.height属性，检测宽度>高度的时间，然后通过让用户知道或相应调整屏幕来处理这种情况
但最好的解决办法是@Doozer1979所说的。。。为什么要覆盖用户喜欢的内容？您可以检测到方向的变化，但我认为您无法阻止它
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mobile Device</title>
<script type="text/javascript">
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
if(window.orientation==0)
{
document.getElementById('portrait').style.display = '';
document.getElementById('landscape').style.display = 'none';
}
else if(window.orientation==90)
{
document.getElementById('portrait').style.display = 'none';
document.getElementById('landscape').style.display = '';
}
}, false);
</script>
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
</head>
<body>
<div id="portrait" style="width:100%;height:100%;font-size:20px;">Portrait</div>
<div id="landscape" style="width:100%;height:100%;font-size:20px;">Landscape</div>
<script type="text/javascript">
if(window.orientation==0)
{
document.getElementById('portrait').style.display = '';
document.getElementById('landscape').style.display = 'none';
}
else if(window.orientation==90)
{
document.getElementById('portrait').style.display = 'none';
document.getElementById('landscape').style.display = '';
}
</script>
</body>
</html>
移动设备
//检测设备是否支持方向更改事件，否则返回到
//调整大小事件。
窗口中的var supportsororientationchange=“onorientationchange”，
方向事件=支持方向更改？“方向更改”：“调整大小”；
addEventListener（定向事件，函数（）{
如果（窗口方向==0）
{
document.getElementById（'纵向'）.style.display=''；
document.getElementById（'landscape'）.style.display='none'；
}
else if（窗口方向==90）
{
document.getElementById（'trait'）.style.display='none'；
document.getElementById（'landscape'）.style.display=''；
}
}，假）；
肖像画
景观
如果（窗口方向==0）
{
document.getElementById（'纵向'）.style.display=''；
document.getElementById（'landscape'）.style.display='none'；
}
else if（窗口方向==90）
{
document.getElementById（'trait'）.style.display='none'；
document.getElementById（'landscape'）.style.display=''；
}
在安卓HTC Sense和苹果iPad上测试并运行。使用新的CSS3功能，您可以将页面旋转到与它们旋转方向相反的方向。抱歉，没有IE7-支持。：（
似乎很奇怪，没有人提出CSS媒体查询解决方案：
@media screen and (orientation: portrait) {
...
}
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">
screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">
screen.orientation.lock(); // webkit only
screen.lockOrientation("orientation");
screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;