根据从哪个设备查看文本来更改文本?

问题描述 投票:-1回答:1

我有一个网站。当我在台式机和笔记本电脑上进行操作时,有一段文字说:单击此处。

但是当它在移动设备上观看时,我想说:点击此处。

是否有可能无需为移动设备共同创建一个新站点就可以做到这一点?

谢谢!

javascript html mobile device desktop
1个回答
0
投票

您可以使用js:

let newText = ""

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

基本上,您创建一个在页面加载时运行的函数,在此函数中screen.width返回屏幕的宽度,如果它比文本大700(px),则将“ Click here!”。但如果屏幕宽度


0
投票

您可以仅使用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>
© www.soinside.com 2019 - 2024. All rights reserved.