Question

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

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

Answer 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规则限制为桌面设备，窗口宽度最小为600px。对于这些，jQuery Mobile创建的页面容器的width固定为600px，margin: 0 auto使页面居中。其余的在美学上改善了结果。

然而，其中一个缺点是：滑动动画并不能很好地发挥作用。我建议禁用动画（可能还取决于使用@media的媒体类型和屏幕大小），因为无论如何它在大屏幕上看起来都很奇怪。

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

    }

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

Answer 4

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

jsFiddle Example

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

4 个答案: