Foro

Home Forums Programación Css3 Funcionamiento de height no definido

This topic contains 2 replies, has 2 voices, and was last updated by  pedrotg 4 años, 1 mes .

Viendo 3 respuestas - de la 1 a 3 (de 3 en total)
  • Funcionamiento de height no definido

    Intervenciones
  • pedrotg 
    Participant

    Que tal buen día.

    Pues cómo dice el título, tengo problema con el funcionamiento del height, hago uso de media queries y en navegador todo va bien, pero a la hora de usarlo en móviles (no lo he provado en tabletas), en la web corre perfecto, pero al momento de pasarlo en aplicación (específicamente Android) queda el body por debajo de la pantalla y no se puede dar el Scroll debido, sé que tal vez tenga algo que ver con que no definí un max/min-height en las media queries como a continucación se los presento

    @media only screen and (max-width: 320px){…}
    @media only screen and (min-width: 321px) and (max-width: 480px){…}
    @media only screen and (min-width: 481px) and (max-width: 640px){…}
    @media only screen and (min-width: 641px) and (max-width: 768px){…}
    @media only screen and (min-width: 769px) and (max-width: 1024px){…}
    @media only screen and (min-width: 1025px){…}

    mi pregunta es, ¿Tengo qué definir ese max/min-height en las media queries forzósamente? o se puede de alguna otra forma.

    Ya he intentado usar también los siguientes meta y me sale el mismo resultado…

    <meta name=”viewport” content=”user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1″ />

    <meta name=”viewport” content=”user-scalable=yes, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height” />

    De antemano gracias por sus respuestas.


    IMK
    IMK 
    Participant

    El viewport estandar por asi decirlo para phonegap y derivados seria:
    1.  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    Ahora con respecto a las media de css3 le comento, pongamos un ejemplo suyo:
    1.  @media only screen and (min-width: 769px) and (max-width: 1024px)

    @media es el inicio de la declaración de la media query, siempre va.
    only screen es la especificación del tipo media, es decir el dispositivo de salida (donde se plasmara o se visualizara), el mas comun es screen que es para todos los dispositivos con pantalla, sin embargo se puede especificar para otros tipos como print que es para imprimir o all para todos los dispositivos por haber, y muchos mas que no tiene caso explicar por el momento. Siempre se especifica y si se omite se entiende que es all, hay tres maneras de comportamiento only y not y and, only es solo para esos media específicos que se declara y not es la exclusión, and es para añadir una condición u opción mas, si no se especifica se entiende que es para todos.

    and (min-width: 769px) and (max-width: 1024px) especifica la condición de que ademas de la media sea screen, el ancho mínimo es de 769 pixeles pero no mayor a 1024 pixles, a partir de especificar el media type (screen, all, etc) las demás condiciones son opcionales y se usan mas que nada para condicionar ciertos elementos que se ajusten o se comporte a determinada situación.

    En mi experiencia al usar responsive en phonegap si bien se usan pixeles para ciertos casos contados, la gran parte y sobre todo el layer debe estar en porcentajes esto para que se ajuste tanto en modo Landscape como en Portrait, ¿el por que?, por que no hay siempre un estandar de las medidas de los dispositivos android cada empresa que distribuye un celular android lo puede fabricar a su gusto en tamaño, a diferencia de IOS que son un estandar en medidas y ahí si sabemos medidas exactas.

    Su problema radica en el css pero en la parte en como se acomodan al ser responsive, debería probar su archivo en un navegador de escritorio simulando el tamaño de un celular y depurar el código css para ver donde esta el fallo.


    pedrotg 
    Participant

    Excelente!! creo que mejor explicano no me lo pudiste decir IMK, de verdad muchas gracias por la ayuda, sí era algo que tenía que ver con eso la verdad.


Viendo 3 respuestas - de la 1 a 3 (de 3 en total)

You must be logged in to reply to this topic.

RT @addyosmani: Learn how to virtualize large lists & tables with react-window: https://t.co/ggzMgmX6zP ~ a small library for efficiently r…04:25 PM Jun 26th