在jQuery Mobile中设置内容的最大宽度?

我有一个jQuery Mobile网页,当前的width=device-width但我的表单元素(文本字段和提交按钮)在桌面计算机上查看时会延伸到浏览器的宽度。

有没有办法设置最大宽度,以便这些元素(或整个内容div)在移动设备上正确显示但在台式计算机上查看时不超过固定的最大宽度?

   

@media only screen and (min-width: 600px)将CSS规则限制为桌面设备,窗口宽度最小为600px。 对于这些,jQuery Mobile创建的页面容器的width固定为600px, margin: 0 auto居中页面。 其余的在美学上改善了结果。

然而,还有一个缺点:滑动动画并不能很好地发挥作用。 我建议禁用动画(可能还取决于使用@media的媒体类型和屏幕大小),因为它在大屏幕上看起来很奇怪。

 @media only screen and (min-width: 800px){ body { background:transparent !important; overflow:hidden !important; } html { background: #fff; background-attachment: fixed; overflow:hidden !important; } .ui-page { width: 340px !important; border:60px solid #111 !important; margin: 50px auto !important; position: relative !important; border-right: 20px #222 outset !important; border-left: 20px #000 outset !important; border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; overflow-y:scroll !important; min-height:600px !important; height:600px !important; max-height:600px !important; padding-bottom:0px; } } 
 .ui-page { max-width: 320px !important;/*or 640 */ margin: 0 auto !important; position: relative !important; } 

设计和测试320 px或640 px。 如果桌面为640像素(分辨率较大),则需要640像素的宽度,而在移动设备上则为移动宽度。

如果需要,给边境

 .ui-page { border-right: 2px #000 outset !important; border-left: 2px #000 outset !important; } 

您可以使用document.getElementById("id").style.width="200px";

jsFiddle示例