Help
Register Now!
Home
Members
Calendar
Contact
Shoutbox
More 
Follow Us on Twitter
Like Us on Facebook
Blue
Green
Red
Black
Sign In »
Register Now!
Link to Test Page
The problems:
CSS max-device-width and the screen.width property are often unreliable
My experiments with most of the browsers running on the GTab indicate a problem with both these attributes at the most important time, when the page is first loaded. Frequently, a value that is widely off will be reported on first load and you will only get the correct value when you refresh the page. Obviously, this is not acceptable because you can't force a page reload as soon as the user accesses your page. You can see this with the Test Page link above (see below for code). On first load on the GTab, the dimensions will often be off, but they will correct themselves on reload.
The user agent string is often spoofed and unreliable on tablet devices
Tablet users often want to access the full versions of websites, not the mobile versions designed for mobile phones. This isn't possible on the stock browser on the GTab but other browsers like Dolphin HD make this possible by allowing the user to change the User Agent setting. When you switch this to "Desktop" Dolphin pretends it's Chrome on Windows. Other browsers pretend to be Mobile Safari on a Mac, even in default mode. You can no longer depend on the user agent string to identify the platform or the browser on mobile devices, and this problem will be much more common on mobile devices than on desktop machines.
Current solution:
At the moment I seem to be getting very reliable results without checking device width or the user agent string with this strategy:
- First eliminate old and less capable mobile browsers, which CAN be done with the user agent string (Symbian, Series 60, Windows CE, Blackberry)
- Check for iOS devices (iPhone and iPad) -- this can be done very reliably with a unique identifier that Apple kindly provides.
- Check for mobile and touch OS capabilities. This can also be done very reliably by polling for the actual attributes and events. If they are there you can be sure that you're in a mobile OS and a touch OS.
As far as I can see, this gives you a reliable way of identifying the two really important mobile tablet operating systems: Apple iOS and Android. iPad and iPhone are identified directly. Android is also identified directly if its name is in the user agent string. However, if you're not in another browser, not in an iOS device but are in a mobile OS and a touch OS then you can be 99% sure that you're on Android. Once you've got that, then you can go about setting up your CSS and your other parameters for your page.
Here is the Test Page link again and I include the basic quick-and-dirty source code of the page below. The page should be yellow on mobile browsers and white otherwise, but this is done on the basis of the max-device-width CSS attribute and it will sometimes fail on the GTab on first load.
I'd be grateful to hear if anyone finds the code incorrectly reporting an Android device.
Why you need this information:
You need to make sure that you're really on a touch OS tablet and not a netbook, which may have similar screen dimensions. Also, the capabilities of Android browsers are different in important ways from those of Mobile Safari on iOS. For example, you can scroll frames and scrollable elements with two fingers on Mobile Safari, but Android browsers can't scroll these elements at all. Also, Android browser's multi-touch support is different in some ways.
An interesting additional observation:
On all the GTab browsers I've tested so far the document.documentElement dimensions and the screen.width/screen.height dimensions are identical. This is NOT the case on any desktop browsers, so this can probably be used as an additional test.
Cheers,
Tim
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Screen Width Test</title>
<style type="text/css">
@media all and (max-device-width: 1024px) {
body {
background-color: yellow;
}
}
</style>
</head>
<body>
<script type="text/javascript">
var agent = navigator.userAgent.toLowerCase();
var scrWidth = screen.width;
var scrHeight = screen.height;
// The document.documentElement dimensions seem to be identical to
// the screen dimensions on all the mobile browsers I've tested so far
var elemWidth = document.documentElement.clientWidth;
var elemHeight = document.documentElement.clientHeight;
// We need to eliminate Symbian, Series 60, Windows Mobile and Blackberry
// browsers for this quick and dirty check. This can be done with the user agent.
var otherBrowser = (agent.indexOf("series60") != -1) || (agent.indexOf("symbian") != -1) || (agent.indexOf("windows ce") != -1) || (agent.indexOf("blackberry") != -1);
// If the screen orientation is defined we are in a modern mobile OS
var mobileOS = typeof orientation != 'undefined' ? true : false;
// If touch events are defined we are in a modern touch screen OS
var touchOS = ('ontouchstart' in document.documentElement) ? true : false;
// iPhone and iPad can be reliably identified with the navigator.platform
// string, which is currently only available on these devices.
var iOS = (navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPad") != -1) ? true : false;
// If the user agent string contains "android" then it's Android. If it
// doesn't but it's not another browser, not an iOS device and we're in
// a mobile and touch OS then we can be 99% certain that it's Android.
var android = (agent.indexOf("android") != -1) || (!iOS && !otherBrowser && touchOS && mobileOS) ? true : false;
document.write("<p><b>Screen width:</b> " + scrWidth +"px<br />" +
"<b>Screen height:</b> " + scrHeight + "px<br />" +
"<b>Document element width:</b> " + elemWidth +"px<br />" +
"<b>Document element height:</b> " + elemHeight + "px<br />" +
"<b>iOS device:</b> "+iOS+"<br />"+
"<b>Mobile OS:</b> "+mobileOS+"<br />"+
"<b>Touch OS:</b> "+touchOS+"<br />"+
"<b>Android device:</b> "+android+"</p>" +
"<p><b>User agent string:</b> "+navigator.userAgent+"</p>"
);
</script>
</body>
</html>
