根据查看的设备更改文本？答案

【问题标题】：Change text depending on what device it's viewed from?根据查看的设备更改文本？
【发布时间】：2020-05-14 08:54:55
【问题描述】：

我有一个网站。当我使用台式机和笔记本电脑进行操作时，会显示一段文字：单击此处。

但是当它在移动设备上查看时，我希望它说：点击此处。

是否可以在不为移动设备一起创建新网站的情况下做到这一点？

谢谢！

【问题讨论】：

是的，有可能
无论如何，从用户体验/可访问性的角度来看，这些都不是好的链接文本。相反，说出动作会做什么，并完全避免整个混乱。例如，“登录您的帐户”或“取消订阅”。想象一下，像屏幕阅读器用户一样，孤立地遇到这些链接。它们完全没用。

标签： javascript html mobile device desktop

【解决方案1】：

你可以用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)，文本将是“点击这里！”但如果窗口宽度为 beetwen 0 和 700，则文本将为“点击此处！”

编辑：我刚刚在代码 sn-p 中看到它不起作用，你应该尝试自己做它，它会起作用

【讨论】：

【解决方案2】：

您最好按照其中一位 cmets 的描述“说出操作将做什么”，但要直接回答您的问题，您可以只使用 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>

【讨论】：