Is it possible to detect on my page, for example using Javascript, when user visit it using mobile device in portrait mode, and stop orientation changing when user rotate its phone to landscape? There is game on my page, optimized for portrait display only and I don't want it in landscape.
+2
A:
This is not an answer you'll probably like, but i would find that behavior pretty annoying on a mobile device. Cater for your users. Would they like to be able to see the screen in landscape mode? If so, then design for that scenario.
Doozer1979
2010-08-17 10:41:06
MichalBE
2010-08-17 10:44:04
agreed - as a web designer its your job to make your website accessible for all users.
Thomas Clayson
2010-08-17 10:44:34
@MichalBe -Instead of blocking the rotation, why not detect it instead, and then display a message to your users that the game is only viewable in portrait mode?
Doozer1979
2010-08-17 10:51:13
+1
A:
As Doozer1979 said, it's a bad idea to take control over a user's device like that (it would be similar to allowing web apps to change browser behavior and force new pages to be opened in windows rather than letting the browser/user decide whether to open them in tabs or windows).
That said, in JavaScript-enabled browsers it should be easy to determine if the screen is in landscape or portrait mode and compensate using CSS. I would give users the option to disable this or at least warn them that device rotation will not work properly.
Edit: The easiest way to detect the orientation of the browser is to check the width of the browser versus the height of the browser. This also has the advantage that you'll know if the game is being played on a device that is naturally oriented in landscape mode (as some mobile devices like the PSP are). This makes more sense than trying to disable device rotation.
Lèse majesté
2010-08-17 10:48:59
A:
You could use the screenSize.width and screenSize.height properties and detect when the width > height and then handle that situation, either by letting the user know or by adjusting your screen accordingly.
But the best solution is what @Doozer1979 says... Why would you override what the user prefers?
NinjaCat
2010-08-17 10:51:29
A:
You can detect the orientation change, but I don't think you can prevent it.
http://developer.apple.com/safari/library/documentation/appleapplications/reference/safariwebcontent/handlingevents/handlingevents.html http://articles.sitepoint.com/article/iphone-development-12-tips/2
Browsera
2010-09-01 00:59:38
A:
Simple Javascript code to make mobile browser display either in portrait or landscape..
(Even though you have to enter html code twice in the two DIVs (one for each mode), arguably this will load faster than using javascript to change the stylesheet...
<!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>
Tested and works on Android HTC Sense and Apple iPad.
Daz Williams
2010-10-10 15:56:06