4

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 -

https://sachinverma53121.github.io/Keypress-Sounds/key-sounds.html

user7247147
  • 1,045
  • 1
  • 10
  • 24
sachuverma
  • 559
  • 6
  • 27
  • 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 Jan 22 '20 at 02:27
  • By the way, the website is nice and good way to promote :D – prabhatojha Jan 22 '20 at 03:08
  • 1
    check this https://stackoverflow.com/questions/10177456/how-to-disable-access-to-website-for-mobile – Akash Bisariya Jan 22 '20 at 05:10

3 Answers3

5

You 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>
Matthew Gaiser
  • 4,558
  • 1
  • 18
  • 35
2

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.com/docs/4.2/utilities/display/:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet"                 href="https://stackpath.bootstrapcdn.com/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>
why_u_wanna_no_me_name
  • 49
  • 7
1

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>
user7247147
  • 1,045
  • 1
  • 10
  • 24