Foro

Home Forums Programación Css3 Media queries para Android && Blackberry && iOS

This topic contains 17 replies, has 4 voices, and was last updated by Jose Jesus Perez Rivas Jose Jesus Perez Rivas 5 años, 1 mes .

Viendo 15 respuestas - de la 1 a 15 (de 18 en total)
  • Media queries para Android && Blackberry && iOS

    Intervenciones
  • brainiac13
    brainiac13 
    Participant

    Buenas, amig@s, he desarrollado mi aplicación adaptando toda la interfaz de manera responsiva usando media queries de CSS
    Al principio la desarrollé para Android, y he puesto las media queries para LDPI, MDPI, HDPI, XHDPI.

    ¿Pero cómo hago, o cuáles son las media queries para iOS y Blackberry? Para hacer los respectivos ajustes.
    Blackberrys desde 5 en adelante y todos los dispositivos con iOS.

    ¡Gracias por leer, saludos!


    jcesarmobile 
    Participant

    Yo no suelo trabajar con media queries porque suelo usar frameworks que se encarguen de la apariencia, pero no deberías trabajar con media queries en función del tamaño de la pantalla en vez de la densidad?

    es decir, en android sería small, normal, large y xlarge en vez de LDPI, MDPI, HDPI y XHDPI
    en iOS un iPad 3-4 o air tienen pantalla retina, pero la resolución del CSS es la misma que para un iPad 1-2, por lo que usarías la misma media query, salvo que quieras hacer algo específico en las retina (como iconos con doble resolución) que entonces ya tendrías que usar -webkit-min-device-pixel-ratio: 2


    Twitter: https://twitter.com/jcesarmobile
    Tutoriales e información sobre phonegap: http://www.phonegap.es/
    Stack Overflow en Español: http://es.stackoverflow.com/


    brainiac13
    brainiac13 
    Participant

    Hola jcesar, muy interesantu tu comentario, ¿qué me recomiendas para poder visualizar mi app en la mayor parte de los dispositivos con Android, iOS y Blackberry?

    ¿Sería conveniente usar Bootstrap o algo así?

    ¡Saludos y gracias por tu respuesta!


    brainiac13
    brainiac13 
    Participant

    Pienso que aplicar Bootstrap a mi proyecto es algo que me tomaría más tiempo de lo que dispongo, ya que es un diseño totalmente único y hecho desde cero, sería más eficiente conocer todas las media queries adecuadas para poder hacer los cambios dentro de cada una de ellas.

    ¿Ustedes qué opinan? – ¿Tienen alguna lista de media queries que cubran la mayor parte de los dispositivos?

    ¡Saludos!


    brainiac13
    brainiac13 
    Participant

    ¿Estas media queries son suficientes?

    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/


    brainiac13
    brainiac13 
    Participant

    jcesar, ¿Qué me recomiendas?
    Necesito adaptar mi app a todos los dispositivos (sin usar jQuery Mobile).

    ¡Gracias y saludos!


    Condence
    Condence 
    Participant

    puedes mostrar un screen de la app ?

    yo lo que hago es que a las divs les pongo porcentaje por ejemplo el logotipo max-width: 200px; width: 100%; si son muchas tablas y divs puedes usar la funcion de desarollador de firefox y tu ir sacando medidas..


    brainiac13
    brainiac13 
    Participant

    Sí, entiendo lo que dices de hacerlo propocionalmente, pero al principio el contenedor más externo, deberá varias en función del dispositivo por eso, quiero saber cuáles son las media queries que cubran desde la pantalla más chica a la más grande.

    Espero que alguien me pueda ayudar, :c
    gracias por responder y reanimar este hilo tan importante.

    ¡Saludos!


    Condence
    Condence 
    Participant

    bajate Ripple en Google chrome ahi tiene las medidas de dispositivos ios y blackberry ejemplo

    Iphone 5 : 640×1136
    Nexus 4 : 768×1280
    BlackBerry Bold 9700 : 480×360


    brainiac13
    brainiac13 
    Participant

    ¡Vaya! No lo sabía, yo tengo Ripple, ¿en qué parte de Ripple está? ¿Y las de Android?

    ¡Gracias por responder :D !


    brainiac13
    brainiac13 
    Participant

    ¿No hay algo en Ripple para sacar automática la media query?

    Mobile Web
    Device: BlackBerry Bold 9700
    OS: BlackBerry OS 6
    Manufacturer: BlackBerry
    Screen: 480×360
    Density: 246 PPI
    User Agent:
    Mozilla/5.0 (BlackBerry; U; BlackBerry 9700; en) AppleWebKit/534.1+ (KHTML, Like Gecko) Version/6.0.0.141 Mobile Safari/534.1

    Por ejemplo, ¿Cómo hago la media query para este Blackberry?


    Condence
    Condence 
    Participant

    disculpame por tardarme a responderte no habia leido. mira te doy un ejemplo

     Code: Ejemplo (select
    1.
    2.
    3.

    @media screen and (max-width: 480px) {
        // Aqui el CSS con dispositivos con una resolucion menor a 480px  ( BlackBerry Bold 9700 )
    }


    Condence
    Condence 
    Participant

    entra a esta pagina aqui te dara las medidas de algunos dispositivos

    http://cssmediaqueries.com/target/


    Jose Jesus Perez Rivas
    Jose Jesus Perez Rivas 
    Keymaster

    Buenas a tod@s hace ya tiempo preparé una galería de fotos con media queries, es posible que os sea de ayuda :)

    http://www.phonegapspain.com/tutorial/galeria-fotografica-con-media-queries-iscroll-y-xui/

    Lo que deberás tener muy en cuenta es el tema de la rotación del dispositivo, en el tutorial que te paso está controlado ese tema.

    Parte del código que te encontrarás es como el siguiente, donde puedes ver como voy controlando según la resolución de la pantalla:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.

    @media only screen and (min-width: 768px) and (max-width: 959px) {
      .contenedorBoton{
        width:12.5% !important;
      }
    }

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
      .contenedorBoton{
        width:25% !important;
      }
    }

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {  
      .contenedorBoton{
        width:16.666% !important;
      }
    }

    Y con este otro voy controlando la rotación:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.

    /*CON ESTA FUNCION SABREMOS SI CAMBIAMOS DE ORIENTACION EL MOVIL Y PODREMOS RECARCULAR EL ALTO DE LAS MINIATURAS*/
    x$(window).orientationchange(function(e) {
      x$('#cargando').css({ visibility: 'visible'});
      //Comprobamos si el zoom esta activado, y si lo esta lo ocultamos mientras aparece el gif cargando
      if(estadoZoom==1) x$('.md-modal').css({ visibility: 'hidden' });
      //Ocultamos la capa contenedora de las miniaturas
      x$('#wrapper').css({ visibility: 'hidden' });
      //Esperamos unos 300 ms para que al dispositivo le de tiempo girar la pantalla, y ejecutamos la funcion calcular
      setTimeout(calcular,300);
    });

    Espero te sea de ayuda :)


    brainiac13
    brainiac13 
    Participant

    Muchas gracias a los dos, muy valiosos sus comentarios.

    Sólo me queda una pequeña duda, José, ¿Las media queries de ese tutorial se adaptan para Android, iOS y Blackberry?

    ¡Gracias y saludos!


Viendo 15 respuestas - de la 1 a 15 (de 18 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