I have created a website where users can upload a file with an activation code and input it manually. However, I want to restrict the file upload functionality on smartphones and tablets. Here is how I am attempting to do this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<title />
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Some content for the page -->
<div class="hidden-xs hidden-sm">
<span>Upload file</span>
<input type="file" />
<input type="button" value="Upload" />
</div>
<div>
<span>Insert key</span>
<input type="text" />
</div>
<!-- More content for the page -->
</body>
</html>
Although this setup works well on smartphones, tablets in portrait mode, and desktops, I have noticed that on tablets in landscape mode, the upload feature is visible. It appears that the resolution setting considers them as being in "medium" display mode, which is why the upload option shows up.
Is there a way to detect whether the device accessing the site is a smartphone, tablet, or desktop so that I can adjust the behavior accordingly?
Thank you for any assistance.