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

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.对于这些,width由jQuery Mobile创建的页面容器固定为600px,margin: 0 auto使页面居中.其余的在美学上改善了结果.

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