If you want to create web applications ready for multiple devices you have to detect how the user interacts with the device. In many cases, there are devices with touch screens. The user interact with them with their finger or with a pencil.
This is the code I use to detect touch screen devices:
if ("ontouchstart" in document.documentElement)
{
// It's a touch screen device.
}
else
{
// Others devices.
}
{
// It's a touch screen device.
}
else
{
// Others devices.
}
Demostration
Click or touch on black screen:
Source code of the demostration
To try the demo, copy this code and paste it into a text editor. Then save it as example.html and, finally, open the file with a browser.
<!doctype html>
<html>
<head>
<title>Detect touch screen devices in Javascript</title>
<meta charset="utf-8" />
<style type="text/css">
#canvas{background-color: #000;}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init, false);
function init()
{
var canvas = document.getElementById("canvas");
if ("ontouchstart" in document.documentElement)
{
canvas.addEventListener("touchstart", detect, false);
}
else
{
canvas.addEventListener("mousedown", detect, false);
}
}
function detect()
{
if ("ontouchstart" in document.documentElement)
{
alert("You are using a touch screen device");
}
else
{
alert("You are using a normal screen device");
}
}
</script>
</head>
<body>
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
<html>
<head>
<title>Detect touch screen devices in Javascript</title>
<meta charset="utf-8" />
<style type="text/css">
#canvas{background-color: #000;}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init, false);
function init()
{
var canvas = document.getElementById("canvas");
if ("ontouchstart" in document.documentElement)
{
canvas.addEventListener("touchstart", detect, false);
}
else
{
canvas.addEventListener("mousedown", detect, false);
}
}
function detect()
{
if ("ontouchstart" in document.documentElement)
{
alert("You are using a touch screen device");
}
else
{
alert("You are using a normal screen device");
}
}
</script>
</head>
<body>
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
Do you like this article? Share it with your friends with this link: http://miloq.blogspot.com/2011/05/detect-touch-devices-javascript.html
ReplyDeleteThanks for reading!
Thanks for the tips as I am Java learner
ReplyDeletewow.. I never knew that Javascript can do that. Thanks for this info! :)
ReplyDeleteSorry, but this does not work in a Nokia N800, that is detected as a 'normal' screen device.
ReplyDeleteThanks,
L.
can i use `ontouchstart` on other elements like `div` and `span`?
ReplyDeleteWorks well on Android. On my Windows (Win 8 Preview) touch device... not so much. Cool script, though!
ReplyDeleteHi, doesn't work on Samsung Galaxy Tab 2.0 with Android 4.0.3, on my older Galaxy Tab with Android 3.1 everything works fine.
ReplyDeleteSame problem here... sad.
DeleteHave you ever thought about writing an e-book or guest authoring
ReplyDeleteon other blogs? I have a blog centered on the same ideas you discuss and would really
like to have you share some stories/information. I know my viewers would
appreciate your work. If you're even remotely interested, feel free to shoot me an email.
My webpage - do you agree
When I check this page in the iPhone emulator that comes with xCode, I can't scroll past the top 3 lines of the first code block. When I check it on a real iPhone (iOS 6), I can scroll all the way down but the black box is missing.
ReplyDeletecode dont work with joomla
ReplyDeleteIt has proficient JAVA Developers, who have inside and out aptitude in Java, spring, Hibernate, J2SE and J2EE and utilizing this ability, they create rich-highlights, high security, java
ReplyDeleteIt mights be better for 'ontouchstart' in window, more than for to document.documentElement, as this give bigger for different document insteads of one elements. Also no needs to wait for DOM loadeds in these cases.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDelete