在 jQuery Mobile 中设置内容的最大宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7936119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting maximum width for content in jQuery Mobile?
提问by DanielGibbs
I have a jQuery Mobile webpage which currently has a width=device-widthbut my form elements (textfields and the submit button) stretch to the width of the browser when viewed on a desktop computer.
我有一个 jQuery Mobile 网页，它当前有一个，width=device-width但我的表单元素（文本字段和提交按钮）在台式计算机上查看时会拉伸到浏览器的宽度。
Is there any way to set a maximum width so that these elements (or the whole content div) display properly on mobile devices but don't exceed a fixed maximum width when viewed on desktop computers?
有没有办法设置最大宽度，以便这些元素（或整个内容 div）在移动设备上正确显示，但在台式计算机上查看时不超过固定的最大宽度？
回答by Stefan Paul Noack
<style type='text/css'>
<!--
html { background-color: #333; }
@media only screen and (min-width: 600px){
.ui-page {
width: 600px !important;
margin: 0 auto !important;
position: relative !important;
border-right: 5px #666 outset !important;
border-left: 5px #666 outset !important;
}
}
-->
</style>
The @media only screen and (min-width: 600px)restricts the CSS rule to desktop devices with a minimum window width of 600px. For these the widthof the page container created by jQuery Mobile is fixed to 600px, margin: 0 autocenters the page. The rest improves the result aesthetically.
将@media only screen and (min-width: 600px)CSS 规则限制为最小窗口宽度为 600 像素的桌面设备。对于这些width由 jQuery Mobile 创建的页面容器的固定为 600px，margin: 0 auto使页面居中。其余的在美学上改善了结果。
However, ther is one drawback: this doesn't really play well with the sliding animation. I suggest to disable the animation (maybe also depending on the media type and screen size using @media), because it looks just weird on a big screen anyways.
但是，有一个缺点：这在滑动动画中并不能很好地发挥作用。我建议禁用动画（可能也取决于使用的媒体类型和屏幕大小@media），因为无论如何它在大屏幕上看起来都很奇怪。
回答by Neo
@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;
}
}
回答by codemirror
.ui-page {
max-width: 320px !important;/*or 640 */
margin: 0 auto !important;
position: relative !important;
}
Design and test for 320 px or 640 px. in case of 640 px in desktop(bigger resolution) it will take a width of 640 px and on mobile it will be width of mobile.
设计和测试 320 像素或 640 像素。如果桌面版为 640 像素（更大的分辨率），它将采用 640 像素的宽度，而在移动设备上，它将是移动设备的宽度。
give border if needed
如果需要，给边界
.ui-page {
border-right: 2px #000 outset !important;
border-left: 2px #000 outset !important;
}
回答by Naning
You can use document.getElementById("id").style.width="200px";
您可以使用 document.getElementById("id").style.width="200px";
