Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to detect a touch screen device. To do this we use HTML and Javascript.
This is a quick and super easy tutorial. If you are looking for more tutorials to improve your javascript skills, you can check out this playlist here. This playlist contains a bunch of javascript tutorials that will help you practice your skills.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out the video below. Also subscribe to my youtube channel where I post new tips, tricks and tutorials related to web development every alternate day.
Project Folder Structure:
Before we start coding let us create the project folder structure. We create a project folder called – ‘Detect Touch Device’. Inside this device, we have two files – index.html and style.css. The first file is the HTML document while the second one is the stylesheet.
I have included the javascript within the HTML file inside the script tag. You can place it separately in an external script file.
HTML:
We begin with HTML. First, copy the code below and paste it into your HTML document. Our HTML code consists of a p tag with id ‘result’.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Detect Touch Device</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p id="result">Some Demo Text Here</p>
<script>
let result = document.getElementById("result");
const isTouchDevice = () => {
try {
//We try to create touch event. It would fail for desktops and throw an error.
document.createEvent("TouchEvent");
result.innerHTML = `It is a <span>Touch</span> device`;
} catch (e) {
result.innerHTML = `It is a <span>Mouse</span> device`;
}
};
isTouchDevice();
</script>
</body>
</html>
CSS:
Next, we style this p tag with CSS. For this copy, the code provided to you below and paste it into your stylesheet. This styling part is optional and you can skip the whole CSS code.
body {
margin: 0;
padding: 0;
background-color: #ae9cff;
}
p {
width: 75%;
max-width: 550px;
background-color: #ffffff;
text-align: center;
font-size: 2.4em;
font-family: "Poppins", sans-serif;
padding: 2em 0;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.3em;
color: #01003e;
box-shadow: 0 30px 50px rgba(1, 0, 62, 0.15);
}
span {
font-weight: 600;
}
Javascript:
Finally, we implement the functionality using Javascript. We create a reference to the result. Next, we create a function called – ‘isTouchDevice()’.
In this function, we try to create a ‘TouchEvent’. This would fail for desktops/mouse devices and throw an error. So in the try block, we change the HTML of the p tag to – ‘It is a TOUCH device’. While in catch block we change the HTML content of the p tag to – ‘It is a MOUSE device’
That’s it for this tutorial. If you face any issues while creating this project you can download the source code by clicking on the -‘ Download Code’ button below.
Also, I would love to hear from you guys. So if you have any queries, suggestions or feedback you can comment below.
Happy Coding!
