The Galaxy Tab Forum: Detecting Android tablets with JavaScript - The Galaxy Tab Forum

Jump to content

Welcome to The Galaxy Tab Forum

Welcome to The Galaxy Tab Forum, like most online communities you must register to view or post in our community, but don't worry this is a simple free process that requires minimal information. Take advantage of it immediately, Register Now or Sign In.
  • Start new topics and reply to others
  • Subscribe to topics and forums to get automatic updates
  • Add events to our community calendar
  • Get your own profile and make new friends
  • Customize your experience here
Guest Message by DevFuse
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Detecting Android tablets with JavaScript

Posted 01 January 2011 - 02:00 PM (#1) User is offline   Random Flux 

  • Member
  • PipPip
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Group: Members
  • Posts: 58
  • Joined: 10-December 10
  • LocationCologne, Germany
  • Device Size:Unknown (SAD)
  • Device Model Number:Unknown(SAD) See : Settings, About Device
  • Android Version:Unknown(SAD) - See : Settings, About Device

Programming dynamic websites targeted for mobile devices has got more difficult with the introduction of Android tablets like the Galaxy Tab. It is no longer possible to rely entirely on the max-device-width property in CSS media queries or the user agent string to reliably identify Android or the browser.

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. :good:


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>

Don't Be ..... Unknown(SAD)


Please Edit your Profile


Galaxy Tab Model : Unknown(SAD)
Galaxy Tab Number : Unknown(SAD) - See : Settings, About Device
Android Version : Unknown(SAD) - See : Settings, About Device

Remove Advertisements User is offline Advertisements

  • TheGalaxyTabForum.com



Posted 19 January 2011 - 10:36 AM (#2) User is offline   DiscoSteve 

  • Member
  • PipPip
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Group: Members
  • Posts: 22
  • Joined: 30-December 10
  • LocationManchester, UK
  • Device Size:Unknown (SAD)
  • Device Model Number:Unknown(SAD) - See : Settings, About Device
  • Android Version:Unknown(SAD) - See : Settings, About Device

don't rely on that screensize matching documentelement dimensions - you can get scenario on Chrome on a PC by simply maximising the Chrome window and pressing F11
Steve N

Don't Be ..... Unknown(SAD)


Please Edit your Profile


Galaxy Tab Model : Unknown(SAD)
Galaxy Tab Number : Unknown(SAD) - See : Settings, About Device
Android Version : Unknown(SAD) - See : Settings, About Device

Posted 21 January 2011 - 09:12 AM (#3) User is offline   Random Flux 

  • Member
  • PipPip
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Group: Members
  • Posts: 58
  • Joined: 10-December 10
  • LocationCologne, Germany
  • Device Size:Unknown (SAD)
  • Device Model Number:Unknown(SAD) See : Settings, About Device
  • Android Version:Unknown(SAD) - See : Settings, About Device

 DiscoSteve, on 19 January 2011 - 10:36 AM, said:

don't rely on that screensize matching documentelement dimensions - you can get scenario on Chrome on a PC by simply maximising the Chrome window and pressing F11

Yep, already discovered that. Under certain circumstances you can also get them to not match on mobile devices.

There are still a lot of bugs in webkit browsers on Android. For example, after the first orientation change the onorientationchange event fires constantly so it's actually cheaper to poll for orientation changes instead.

Sent from my GTab using Tapatalk
Don't Be ..... Unknown(SAD)


Please Edit your Profile


Galaxy Tab Model : Unknown(SAD)
Galaxy Tab Number : Unknown(SAD) - See : Settings, About Device
Android Version : Unknown(SAD) - See : Settings, About Device

Posted 05 November 2011 - 03:39 PM (#4) User is offline   EricB 

  • Newbie
  • Pip
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Group: Members
  • Posts: 1
  • Joined: 05-November 11

Hi,

i have the same problem to find out if the page is displayed on the Tab or on a Laptop. Is the described solution still the best available now?

Thx
Eric

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic



1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users

IPB Skins by Skinbox

Skin and Language