I have created a webpage using HTML, CSS, JS (Paper.js) But I want my webpage to be displayed only when opened in desktop sites if it is opened in any smartphone the a message must appear like open in desktop nothing else must be loaded because in touch screen devices all functions does not work properly
link to my webpage is -
.html
I have created a webpage using HTML, CSS, JS (Paper.js) But I want my webpage to be displayed only when opened in desktop sites if it is opened in any smartphone the a message must appear like open in desktop nothing else must be loaded because in touch screen devices all functions does not work properly
link to my webpage is -
Share Improve this question edited Jan 22, 2020 at 5:10 user7247147 1,1171 gold badge10 silver badges24 bronze badges asked Jan 22, 2020 at 2:12 sachuvermasachuverma 5977 silver badges29 bronze badges 3https://sachinverma53121.github.io/Keypress-Sounds/key-sounds.html
- Anything you send to a browser will be visible in one way or another. You can disable CSS and JavaScript so those will be deterrents but not fix it entirely. You'd need to check the user agent on the server, which can also be spoofed. Seeing as this is a GitHub page that's out too. – Phix Commented Jan 22, 2020 at 2:27
- By the way, the website is nice and good way to promote :D – prabhatojha Commented Jan 22, 2020 at 3:08
- 1 check this stackoverflow./questions/10177456/… – Akash Bisariya Commented Jan 22, 2020 at 5:10
3 Answers
Reset to default 5You could use JS to not display the div/tag if the page is less than a certain width
Something like this might do:
<p id="demo">This only shows when the window is more than 500.</p>
<p id="message" style="display: none;">Please use this on a desktop.</p>
<script>
if (window.innerWidth < 500){
document.getElementById("demo").style.display = "none";
document.getElementById("message").style.display = "block";
}
</script>
You could also use CSS
<style>
#message {
display: none;
}
@media (max-width: 500px){
#demo {
display: none;
}
#message {
display: block;
}
}
</style>
<p id="demo">This only shows when the window is more than 500.</p>
<p id="message">Please use this on a desktop.</p>
you can do this in bootstrap like this. The paragraph hides on mobile size if you want to hide it on tablet size too, change the "sm" to "md" to find out how to use it visit this link https://getbootstrap./docs/4.2/utilities/display/:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>title</title>
</head>
<body>
<div class="d-none d-sm-block">
<p>hide me on mobile</p>
</div>
<div class="d-block d-sm-none">
<p><strong>show me on mobile</strong></p>
</div>
</body>
</html>add a
<script>
var userAgent;
(function() {
userAgent = navigator.userAgent.toLowerCase();
if (typeof orientation !== 'undefined' || userAgent.indexOf('mobile') >= 0); {
alert('open in desktop');
} else {
document.body.innerHTML = 'your HTML as a string here';
}
})();
</script>