computed - ¿Configurando el ancho máximo para contenido en jQuery Mobile?

set width jquery

Question

Tengo una página web de jQuery Mobile que actualmente tiene un width=device-width pero mis elementos de formulario (campos de texto y el botón de envío) se extienden hasta el ancho del navegador cuando se ven en una computadora de escritorio.

¿Hay alguna forma de establecer un ancho máximo para que estos elementos (o la división de contenido completa) se muestren correctamente en dispositivos móviles pero no excedan un ancho máximo fijo cuando se ven en computadoras de escritorio?

Answer 1

Puede usar document.getElementById("id").style.width="200px";

Ejemplo de jsFiddle

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

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

La @media only screen and (min-width: 600px) restringen la regla CSS a los dispositivos de escritorio con un ancho de ventana mínimo de 600px. Para estos, el width del contenedor de página creado por jQuery Mobile se fija en 600px, margin: 0 auto centra margin: 0 auto la página. El resto mejora el resultado estéticamente.

Sin embargo, hay un inconveniente: esto realmente no funciona bien con la animación deslizante. Le sugiero que deshabilite la animación (quizás también dependiendo del tipo de medio y el tamaño de la pantalla usando @media ), porque de todos modos se ve raro en una pantalla grande.

Answer 4

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

Diseño y prueba para 320 px o 640 px. en el caso de 640 px en el escritorio (resolución más grande) tomará un ancho de 640 px y en el móvil será el ancho del móvil.

dar frontera si es necesario

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