在jQuery Mobile中设置内容的最大宽度? [英] Setting maximum width for content in jQuery Mobile?

问题描述

我有一个jQuery Mobile页面，当前有一个width=device-width，但是当在台式计算机上查看时，我的表单元素(文本字段和提交按钮)会扩展到浏览器的宽度.

I have a jQuery Mobile webpage which currently has a width=device-width but my form elements (textfields and the submit button) stretch to the width of the browser when viewed on a desktop computer.

是否可以设置最大宽度，以使这些元素(或整个内容div)在移动设备上正确显示，但在台式机上查看时不超过固定的最大宽度?

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?

推荐答案

    <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则将页面居中.其余的从美学角度改善了结果.

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 width of the page container created by jQuery Mobile is fixed to 600px, margin: 0 auto centers the page. The rest improves the result aesthetically.

但是，这是一个缺点:这在滑动动画中不能很好地发挥作用.我建议禁用动画(可能还取决于@media的媒体类型和屏幕尺寸)，因为无论如何它在大屏幕上看起来都很奇怪.

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.

这篇关于在jQuery Mobile中设置内容的最大宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！