html - 在@media 屏幕上将参数传递给服务器

Question

我有一个 HTML 页面，它使用 CSS 的 @media 来显示基于宽度的表单。

在小屏幕上，将显示选择选项，在大屏幕上，将显示单选按钮。

我有一个大问题，如果用户选择了单选按钮选项，服务器将获得选择选项，而不是单选按钮。

如何禁用大屏幕上的选择选项？

<div class="visible-phone">
<select class="input-block-level" name="paymentType" >                           
<c:forEach items="${sessionScope.paymentMethodList}" var="item"  varStatus="index">                
<option  value="${item.id}"><c:out value="${item.pymntName}"/></option>
</c:forEach>
</select>
</div>

<div class="hidden-phone">
<c:forEach items="${sessionScope.paymentMethodList}" var="item"  varStatus="index">              
<label class="radio"><input type="radio" name="paymentType" value="${item.id}">   
<c:out value="${item.pymntName}"/> </label>

</c:forEach>
</div>

Answer 1

有关如何使用 JQuery 检测设备的信息，请引用以下 URL:

jQuery mobile user agent detection

您需要根据设备显示/隐藏可见电话/隐藏电话部分。