根据查看文本的设备更改文本?



我有一个网站。当我使用台式机和笔记本电脑时,一段文字说:点击这里。

但是当它在移动设备上查看时,我希望它说:点击这里。

是否可以在不为移动设备创建新网站的情况下执行此操作?

谢谢!

最好像其中一条评论所描述的那样"说出该操作将做什么",但要直接回答您的问题,您可以仅使用 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>

你可以使用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,则文本将是"点击此处!

编辑:我刚刚看到在代码片段中它不起作用,您应该尝试自己做,它会起作用

相关内容

  • 没有找到相关文章

最新更新