gpt4 book ai didi

html - 使用 CSS 仅为移动设备发送 html 输入值

转载 作者:太空宇宙 更新时间:2023-11-03 17:58:25 25 4
gpt4 key购买 nike

目标是仅当来自移动设备时才向服务器发送隐藏的输入值。我想使用 CSS 媒体查询,以便它保持响应。

到目前为止我试过这个:

不显示字段

<input type='hidden' name='mobile' value='yes' style="display:none">

结果:仍然发送到服务器

CSS 内容

<div class='mobile-only'></div>

@media (max-width: 768px) {
.mobile-only {content: "<input type='hidden' name='mobile' value='yes'>"}
}

结果:根本没有发送到服务器

非 JS、CSS 方法是否可行?

最佳答案

您可以混合一些 javascript 并完成它。这是您想看一看的东西 -

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@media (max-width: 768px) {
#mymobileelement {display:none;}
}
</style>
<script type="text/javascript">
function setvalue () {
var ele = document.getElementById("mymobileelement");
var isVisible = ele.offsetWidth > 0 || ele.offsetHeight > 0;
document.getElementById("ValueToSendToServer").value = (isVisible) ? "pc" : "mobile";
alert("Server will recieve = " + document.getElementById("ValueToSendToServer").value);
}
</script>
</head>
<body>
<input type="button" onclick="javascript:setvalue();" value="Click me to see what server will get">
<input type="hidden" value="pc" id="ValueToSendToServer">
<div id="mymobileelement"></div>
</body>
</html>

关于html - 使用 CSS 仅为移动设备发送 html 输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25856192/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com