qqr*_*ryq 34 javascript mobile mobile-phones mobile-website
是否可以在我的页面上检测,例如使用Javascript,当用户在纵向模式下使用移动设备访问它时,并在用户将其手机旋转到横向时停止方向改变？我的页面上有游戏,仅针对纵向显示进行了优化,我不希望它在横向上显示.
Dem*_*Imp 29
新的API正在开发(目前可用)!
screen.orientation.lock(); // webkit only
和
screen.lockOrientation("orientation");
"orientation"可以是以下任何一种:
portrait-primary - 表示屏幕处于主纵向模式时的方向.如果设备处于正常位置且该位置处于纵向状态,或者设备的正常位置处于横向状态且设备顺时针旋转90°,则屏幕将被视为其主要纵向模式.正常位置取决于设备.
portrait-secondary - 表示屏幕处于次要肖像模式时的方向.如果设备与其正常位置保持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
Lès*_*sté 19
在支持JavaScript的浏览器中,应该很容易确定屏幕是横向还是纵向模式,并使用CSS进行补偿.为用户提供禁用此选项或至少警告他们设备轮换无法正常工作可能会有所帮助.
检测浏览器方向的最简单方法是检查浏览器的宽度与浏览器的高度.这也具有以下优点:您将知道游戏是否正在以横向模式自然定向的设备上播放(如某些移动设备,如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砂纸.此外,这将旋转样式应用于窗口对象,我从未实际测试过,也不知道是否有效.您可能需要将样式应用于文档元素.
无论如何,我仍然建议只显示一条消息,要求用户以纵向模式玩游戏.
Fac*_*ier 13
似乎很奇怪,没有人提出CSS媒体查询解决方案:
@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
小智 6
简单的Javascript代码,使移动浏览器以纵向或横向显示..
(即使你必须在两个DIV中输入两次html代码(每个模式一个),可以说这比使用javascript更改样式表更快加载...
<!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.
使用新的 CSS3 功能，您可以将页面旋转到与旋转方向相反的方向。抱歉，不支持 IE7-。:(。
var rotate = 0 - window.orientation;
setAttribute("transform:rotate("+rotate+"deg);-ms-transform:rotate("+rotate+"deg);-webkit-transform:rotate("+rotate+"deg)", "style");