Изменить текст в зависимости от того, с какого устройства он просматривается? - PullRequest
Новая
       24

Изменить текст в зависимости от того, с какого устройства он просматривается?

0 голосов
/ 29 января 2020

У меня есть сайт. Когда я go пишу на нем с настольными компьютерами и ноутбуками, фрагмент текста говорит: Нажмите здесь.

Но при просмотре на мобильном устройстве я хочу сказать: Нажмите здесь.

Возможно ли это сделать без создания нового сайта для мобильных устройств?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 29 января 2020

Гораздо лучше, если вы «говорите, что будет делать действие», как описано в одном из комментариев, но чтобы ответить на ваш вопрос прямо, вы можете сделать это всего за css медиазапросами: 

.mobile {
  display: block;
}
.desktop {
  display: none;
}

@media only screen and (min-width: 768px) {
  .mobile {
    display: none;
  }
  .desktop {
    display: block;
  }
}
<p class= 'mobile'>Tap here</p>
<p class= 'desktop'>Click Here</p>
0 голосов
/ 29 января 2020

Вы можете сделать это, используя js: 

let newText = ""

function changeText() {
  if (window.innerWidth> 0 && window.innerWidth < 700) {
    newText = "Tap Here!";
  } else if (window.innerWidth > 700) {
    newText = "Click Here!";
  } 
  document.getElementById("text").innerHTML = newText
 }
<body onload="changeText()">
  <p id="text"></p>
 </body>

По сути, вы создаете функцию, которая запускается при загрузке страницы, в этой функции window.innerWidth возвращает ширину окна, если оно больше 700 (px), чем текст будет "Нажмите здесь!" но если ширина окна находится между 0 и 700, текст будет «Нажмите здесь!»

Редактировать: я только что увидел, что в фрагменте кода это не работает, вы должны попробовать сделать это самостоятельно и это будет работать

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...