logo标签列表

仅在桌面上显示网页

javascripthtmlcssweb
4
我使用HTML、CSS和JS（Paper.js）创建了一个网页。但是我希望我的网页只在桌面站点中打开时显示，如果在任何智能手机上打开，则必须出现一条消息，如在桌面上打开，不加载其他内容，因为在触摸屏设备上所有功能都无法正常工作。
我的网页链接是 -

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

你发送到浏览器的任何内容都将以某种方式可见。您可以禁用CSS和JavaScript，因此它们将是威慑因素，但并不能完全解决问题。您需要在服务器上检查用户代理，但这也可能被欺骗。既然这是一个GitHub页面，那也不行。 - Phix
顺便说一下，这个网站很不错，是一个很好的推广方式 :D - prabhatojha
1
请查看以下链接：https://dev59.com/DWLVa4cB1Zd3GeqPzcEf。 - Akash Bisariya
3个回答
5
您可以使用JS来控制当页面宽度小于某个特定值时不显示div或标签。类似如下代码可行：
<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>

您可以使用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>
2
你可以使用Bootstrap实现此功能。如果您想在平板电脑上隐藏段落，请将“sm”更改为“md”。要了解如何使用它，请访问此链接：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>

1
添加一个

。
<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接