Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Display webpage only on Desktop

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

like image 717
sachuverma Avatar asked Jan 26 '23 09:01

sachuverma


2 Answers

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>
like image 58
Matthew Gaiser Avatar answered Jan 28 '23 09:01

Matthew Gaiser


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>
like image 24
why_u_wanna_no_me_name Avatar answered Jan 28 '23 09:01

why_u_wanna_no_me_name