Отображать веб-страницу только на рабочем столе - PullRequest
Новая
       3

Отображать веб-страницу только на рабочем столе

3 голосов
/ 22 января 2020

Я создал веб-страницу, используя HTML, CSS, JS (Бумага. js) Но я хочу, чтобы моя веб-страница отображалась только при открытии на настольных сайтах, если она открыта на любом смартфоне или сообщение должно выглядеть как открыть на рабочем столе больше ничего не должно быть загружено, потому что в устройствах с сенсорным экраном все функции не работают должным образом

ссылка на мою веб-страницу -

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

Ответы [ 3 ]

6 голосов
/ 22 января 2020

Вы можете использовать JS, чтобы не отображать div / tag, если страница меньше определенной ширины

Что-то подобное может сделать: 

<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 голосов
/ 22 января 2020

вы можете сделать это в 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 голос
/ 22 января 2020

добавить 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...