我有一个网站。当我在台式机和笔记本电脑上进行操作时,有一段文字说:单击此处。
但是当它在移动设备上观看时,我想说:点击此处。
是否有可能无需为移动设备共同创建一个新站点就可以做到这一点?
谢谢!
您可以使用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!”。但如果屏幕宽度
您可以仅使用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>