更改480宽度Javascript的按钮URL

我想更改按钮的url时，他们点击提交，如果他们在移动屏幕480宽度或更少

例如：

<form name="myform1" action="mylink.php" method="post"> 
<input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form> 

但在480宽或更小的移动设备上，我希望它改为：

<form name="myform1" action="mylink-mobile.php" method="post"> 
<input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form> 

该页面是PHP，但我想我可以使用javascript screen.width来检测HTML

JS

[value="480"] { display: none; }
[value="over480"] { display: block; }

@media all and (max-width: 480px) {
    [value="480"] { display: block; }
    [value="over480"] { display: none; }
}

window.onload=函数（）{
如果（window.innerWidth没有JavaScript，您可以使用CSS媒体来显示和隐藏不同的表单


form[name=“myform1”]{
显示：块；
}
表格[name=“myform2”]{
显示：无；
}
@介质（最大宽度：400px）{
表格[name=“myform1”]{
显示：无；
}
表格[name=“myform2”]{
显示：块；
}
}
完全不需要JavaScript即可完成此操作

<form name="myform1" class="wide sense" action="mylink.php" method="post"> 
  <input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form>
<form name="myform1" class="narrow sense" action="mylink-mobile.php" method="post"> 
  <input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form> 

当用户从纵向移动到横向，而不必通过JavaScript监控方向或屏幕几何图形时，这一点就行了。
这个想法是为了检测他们是否在移动设备上，并相应地采取行动，对吗？毕竟，您正在更改表单提交操作，所以我假设在幕后发生了一些不同的事情。

也就是说，我将使用移动设备检测，而不是使用屏幕大小。有关更多信息，请参阅此线程（忽略“jquery”部分，因为提供的信息也有非jquery解决方案）：

大多数人似乎使用用户代理检测来确定您是否在移动设备上使用以下内容：

if (navigator.userAgent.match(/Mobi/)) {
    // mobile!
}

您可以使用不同的
值
属性定义两个提交按钮

<form action="action.php" method="post"> 
   ...
   <input type="submit" name="submit" value="480" />
   <input type="submit" name="submit" value="over480" />
</form> 

然后在
action.php
中检查哪个用户实际提交了表单，并根据POST发送的参数应用不同的服务器端逻辑

优点：


无需复制表单的标记
无需使用javascript来检测视口的大小变化
服务器端逻辑位于一个入口点中


示例（github要点）：

我喜欢你要去的地方，但我不清楚如何将值与操作url联系起来。如果最大宽度是尝试检查
$\u POST['submit']的值，我想在他们提交表单时将其发送到移动url
，希望您能看到
480
或
over480
@KeithW-see。根据您调用脚本或其他脚本的值，在您的示例中，标记名是myform1还是form，因为页面上可能有多个表单？谢谢，这是一个优雅的解决方案！
if (navigator.userAgent.match(/Mobi/)) {
    // mobile!
}

<form action="action.php" method="post"> 
   ...
   <input type="submit" name="submit" value="480" />
   <input type="submit" name="submit" value="over480" />
</form> 

[value="480"] { display: none; }
[value="over480"] { display: block; }

@media all and (max-width: 480px) {
    [value="480"] { display: block; }
    [value="over480"] { display: none; }
}