[当用户使用移动设备以纵向模式访问它时，是否可以例如使用Javascript在我的页面上进行检测，而当用户将其手机旋转至横向时，是否可以停止更改方向？我的页面上有游戏，仅针对纵向显示进行了优化，我不希望横向使用。
screen.orientation.lock(); // webkit only
和
screen.lockOrientation("orientation");
其中“方向”可以是以下任意一种：
portrait-primary-它代表屏幕在其主要纵向模式下的方向。如果设备保持在其正常位置并且该位置处于纵向，或者设备的正常位置处于横向并且保持设备顺时针旋转90°，则认为屏幕处于其主要纵向模式。正常位置取决于设备。
肖像辅助-它代表屏幕处于辅助纵向模式时的屏幕方向。如果将设备从其正常位置保持180°并且该位置处于纵向，或者设备的正常位置处于横向并且将设备保持在逆时针方向旋转90°，则认为该屏幕处于辅助纵向模式。正常位置取决于设备。
landscape-primary-它代表屏幕在其主要横向模式下的方向。如果将设备保持在其正常位置并且该位置处于横向，或者设备的正常位置为纵向并且将设备保持在顺时针方向旋转90°，则认为屏幕处于其主要横向模式。正常位置取决于设备。
landscape-secondary-它代表屏幕在其第二横向模式下的方向。如果所握持的设备与其正常位置相距180°并且该位置处于横向，或者设备的正常位置为纵向且所握持的设备逆时针旋转90°，则认为该屏幕处于辅助横向模式。正常位置取决于设备。
肖像-它代表纵向主要和纵向次要。
风景-它代表横向主要和横向次要。
默认-它代表纵向或横向主要取决于设备的自然方向。例如，如果面板分辨率为1280 * 800，则默认设置为横向；如果面板分辨率为800 * 1280，则默认设置为纵向。
Mozilla建议在屏幕上添加lockOrientationUniversal以使其与跨浏览器更兼容。
screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
转到此处获取更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation
最简单的检测浏览器方向的方法是检查浏览器的宽度与浏览器的高度。这还具有一个优势，您可以知道游戏是否在自然使用横向模式的设备上进行播放（例如某些移动设备，例如PSP）。这比尝试禁用设备旋转更有意义。
Daz展示了如何检测设备方向，但是检测方向只是解决方案的一半。如果要反转自动方向更改，则需要将所有内容旋转90°或270°/ -90°，例如
$(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);
}
注意：如果要在IE中旋转任意角度（出于其他目的），则需要使用矩阵变换，例如
rads = degs * Math.PI / 180;
m11 = m22 = Math.cos(rads);
m21 = Math.sin(rads);
m12 = -m21;
iefilter = "progid:DXImageTransform.Microsoft.Matrix("
+ "M11 = " + m11 + ", "
+ "M12 = " + m12 + ", "
+ "M21 = " + m21 + ", "
+ "M22 = " + m22 + ", sizingMethod = 'auto expand')";
styles['filter'] = styles['-ms-filter'] = iefilter;
-或使用CSS Sandpaper。另外，这会将旋转样式应用于窗口对象，我从未实际对其进行过测试，并且不知道它是否有效。您可能需要将样式应用于文档元素。
无论如何，我仍然建议仅显示一条消息，要求用户以纵向模式玩游戏。
@media screen and (orientation: portrait) {
...
}
以及使用特定样式表的选项：
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">
MDN：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#orientation
<!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>
经过测试，可在Android HTC Sense和Apple iPad上使用。
var rotate = 0 - window.orientation;
setAttribute("transform:rotate("+rotate+"deg);-ms-transform:rotate("+rotate+"deg);-webkit-transform:rotate("+rotate+"deg)", "style");
#rotate-device {
width: 100%;
height: 100%;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
background-color: #000;
background-image: url(/path to img/rotate.png);
background-size: 100px 100px;
background-position: center;
background-repeat: no-repeat;
display: none;
}
@media only screen and (max-device-width: 667px) and (min-device-width: 320px) and (orientation: landscape){
#rotate-device {
display: block;
}
}<div id="rotate-device"></div>