在 jQuery Mobile 中设置内容的最大宽度？答案

【问题标题】：Setting maximum width for content in jQuery Mobile?在 jQuery Mobile 中设置内容的最大宽度？
【发布时间】：2017-05-24 13:53:12
【问题描述】：

我有一个 jQuery Mobile 网页，目前有一个 width=device-width，但我的表单元素（文本字段和提交按钮）在台式计算机上查看时会拉伸到浏览器的宽度。

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

【问题讨论】：

标签： jquery jquery-mobile width

【解决方案1】：

    <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>

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

但是，有一个缺点：这并不能很好地与滑动动画配合使用。我建议禁用动画（可能还取决于使用@media 的媒体类型和屏幕尺寸），因为无论如何它在大屏幕上看起来都很奇怪。

【讨论】：

谢谢，很抱歉迟到了，我没有注意到还有另一个答案。您是否可以编辑您的答案以解释这是如何解决问题的？
没问题。另一种解决方案可能是在.ui-page 上使用max-width。并非所有浏览器都支持@media。
@noah1989 嘿，在执行此操作时，您有没有解决过渡幻灯片的问题？谢谢！
@user1040259 不，我只是禁用了它。请注意，当前版本的 jqmobile 默认使用淡出过渡，因为必须将两个页面都保留在 DOM 树中会导致太多麻烦。
谢谢诺亚，这很有帮助。

【解决方案2】：

@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;
        }

    }

【讨论】：

我有同样的问题，答案非常有帮助，然后我添加了一些额外的 css 并决定分享它。这不仅仅是为了获得认可：D

【解决方案3】：

.ui-page {
    max-width: 320px !important;/*or 640 */
    margin: 0 auto !important;
    position: relative !important;
}

设计和测试 320 像素或 640 像素。如果桌面为 640 像素（更大的分辨率），则其宽度为 640 像素，而在移动设备上则为移动设备的宽度。

如果需要，给边框

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

【讨论】：

【解决方案4】：

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

jsFiddle Example

【讨论】：

设置元素的宽度。我想设置最大宽度。使用您的代码，当在移动浏览器上查看时，元素不会缩小其宽度。