admin管理员组

文章数量:1316685

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 -

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

  • javascript
  • html
  • css
  • web
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 3
  • 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
Add a ment  | 

3 Answers 3

Reset to default 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>

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>

本文标签： javascriptDisplay webpage only on DesktopStack Overflow

版权声明：本文标题：javascript - Display webpage only on Desktop - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742006444a2412051.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。