可以使用JavaScript中的 navigator.userAgent 属性来检测用户设备，并使用CSS的 display 属性来隐藏或显示div元素。 下面是一个简单的示例： !DOCTYPE html html head style /* 用于电脑端显示的div样式 */ #a-div { display: block; } /* 用于手机端显示的div样式 */ @media screen a […]
可以使用JavaScript中的navigator.userAgent属性来检测用户设备，并使用CSS的display属性来隐藏或显示div元素。
下面是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 用于电脑端显示的div样式 */
#a-div {
display: block;
}
/* 用于手机端显示的div样式 */
@media screen and (max-width: 768px) {
#b-div {
display: block;
}
}
</style>
</head>
<body>
<div id="a-div">A</div> <!-- id为A的div -->
<div id="b-div">B</div> <!-- id为B的div -->
<script>
// 检测用户设备类型
if (/iPhone|iPad|iPod|Android|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
// 如果是手机端，则隐藏id为A的div，显示id为B的div
document.getElementById("a-div").style.display = "none";
document.getElementById("b-div").style.display = "block";
} else {
// 如果是电脑端，则隐藏id为B的div，显示id为A的div
document.getElementById("b-div").style.display = "none";
document.getElementById("a-div").style.display = "block";
}
</script>
</body>
</html>
在这个示例中，我们首先定义了电脑端和手机端显示的CSS样式。在JavaScript部分，我们使用正则表达式从navigator.userAgent属性中检测用户设备类型。如果是手机端，则隐藏id为A的div，显示id为B的div；如果是电脑端，则隐藏id为B的div，显示id为A的div。
