Estoy trabajando en un sitio que necesita para trabajar en equipos de escritorio y móviles. Ahora mismo tengo un div del contenido principal que se establece en el 70% de la anchura de la pantalla. Sin embargo, creo que este es pequeño para dispositivos móviles (como teléfonos, no tanto en tabletas) y quiere hasta que el 90 o 95% ¿Cómo puedo hacer esto (por ejemplo, para los tamaños de pantalla más pequeños de 5 pulgadas) sin utilizar terriblemente poco fiables navegador oler? Oigo el mantra «en función de la característica de detección de función de detección de detección de» más y más, y entiendo por qué eso es una buena cosa…pero no sé lo que «cuentan» con el fin de detectar este problema…

Gracias.

Ok déjame aclarar una cosa es imposible para obtener el Tamaño Físico de la Pantalla E. G 3.7 pulgadas de oler no es todavía no perfectamente posible, Mostrar obras en Píxeles nada más, en términos de la OS es la dosis que realmente no sabemos el tamaño de la pantalla sólo el controlador de dosis y no hay acceso a la aplicación a los conductores sin una Arraigada/dispositivo con Jailbreak y luego tu limitar a los usuarios estúpidamente, como tal, no hay ningún explorador le hago entonces, ¿qué se le está pidiendo no es posible por las respuestas que han dado a las respuestas

OriginalEl autor Esaevian | 2013-07-01

5 Comentarios

  1. 6

    Puede utilizar CSS:

    @media screen and (max-width:500px) {
      /* smaller screens */
    }
    
    @media screen and (max-width:960px) {
      /* bigger screens */
    }
    Cómo hace esto para mí el tamaño físico? El iPhone tiene una pantalla pequeña, sin embargo, caería bajo el «más grande de las pantallas» en tu CSS.
    sólo el uso de diferentes max-anchos…
    Él está en lo correcto – el tamaño y la resolución no están relacionados con ninguna más. Mi teléfono tiene una pantalla de 4.7″, pero una resolución más alta que mi PC de escritorio.
    Yo tendría que regresar a la actualización de «max-width» cada vez que un nuevo dispositivo que tiene una mayor ppi que antes.
    css píxeles son sólo vagamente relacionado con píxeles de la pantalla. El valor de una consulta de medios de comunicación va a ser inferior a los más pequeños a una pantalla, incluso si la resolución es la misma, lo que significa que usted puede utilizar para manejar diferentes tamaños de pantalla.

    OriginalEl autor Neal

  2. 2

    Usted puede conseguir un salvaje aproximación del tamaño de la pantalla con un poco de javascript

    function getScreenSizeInches() {    
        var temp =  document.createElement("div")
        temp.style.overflow='hidden';
        temp.style.visibility='hidden';
        document.body.appendChild(temp)
        temp.style.width = "10in"
        var dpi = temp.offsetWidth / 10;
        return screen.width / dpi + 'x' + screen.height / dpi;
    }

    Ver el siguiente violines para su uso en la acción vanillajs, o jquery..

    versión de jQuery:

    function getScreenSizeInches() {    
        var $temp =  $('<div style="overflow:hidden;visibility:hidden;width:10in"/>').appendTo('body'),
           dpi = $temp[0].offsetWidth / 10;
        return screen.width / dpi + 'x' + screen.height / dpi;
    }

    Como se ha señalado en los comentarios de esta técnica pueden ser imprecisos así que yo no lo uso como otra cosa que un avance de tamaño de la pantalla…

    Bonita respuesta, lo intentó, pero la samsung galaxy tab 3 informes como 10.6666 pulgadas cuando lo que realmente es 7.
    Funciona aquí y allí, pero creo 10en no es necesariamente 10en en todos los dispositivos.
    De mis pruebas, después de probar este y a la lectura de por qué no funcionó, un css unidad de medida (es decir, de una pulgada) rara vez es siempre una pulgada, pero en su lugar se hace referencia a una referencia de píxeles. w3.org/TR/css3-values/#absolute-lengths El apoyo era tan mala que nos hemos librado de esta. Buena idea, pero vamos, debido a las css de las implementaciones.
    De acuerdo, he tenido buena suerte con la última colección de dispositivos enfrente de mí cuando traté de esto, pero sobre todo con los nuevos teléfonos y pantallas de alta resolución de ppp esto es absolutamente inexacto. Me gustaría eliminar la respuesta, pero podría resultar útil a alguien.

    OriginalEl autor Kris Erickson

  3. 1

    Usted podría utilizar CSS:

    /*Here goes the CSS for all screens*/
    
    @media handheld {
    
        /*Here goes the CSS for mobile phones and tablets*/
    
    }

    EDITAR:

    Otra sugerencia:

    conjunto de la viewport metatag en el html:

    <meta name="viewport" content="width=device-width, height=device-height" />

    ahora usted puede obtener las dimensiones como este: Obtener las dimensiones de la ventana del navegador con JavaScript

    Es allí una manera a este destino en jQuery? Los elementos que necesito para cambiar el tamaño son creadas dinámicamente, y no están vinculados a una clase.
    stackoverflow.com/questions/8472566/… tal vez esto te puede ayudar.
    Hm…Chrome en el escritorio es responder a la «mano» de la consulta: jsfiddle.net/WNKpj/ EDIT: Espera no importa. Mi error.
    Hm, ahora parece que el iPhone no responde a «mano»…de regreso a la mesa de dibujo.
    matchMedia no devuelve un booelan, pero un MediaQueryList. Uso window.matchMedia("handheld").matches lugar.

    OriginalEl autor s3lph

  4. 0

    Lugar de utilizar jquery puede utilizar javascript simple de detectar:

    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    
    }

    o puede combinar ambos para hacerlo más accesible a través de jQuery…

    $.browser.device = (/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent.toLowerCase()));

    ahora $.navegador devolverá «dispositivo» para todos los dispositivos anteriores

    -1 De mi pregunta: «¿Cómo puedo hacer esto (por ejemplo, para los tamaños de pantalla más pequeños de 5 pulgadas) sin utilizar terriblemente poco fiables browser sniffing?»
    A pesar de las limitaciones de browser sniffing, este condicional devolverá true para todo los dispositivos Android, incluyendo IPTV cuadros de ejecución de Android en tv de alta definición. Además, hay muchos nuevos agentes de usuario a punto de salir al mercado, incluyendo FirefoxOS. Confiar en el agente de usuario reduce la portabilidad del código.
    Creo que la consulta de medios de comunicación es la mejor para este tipo de diseño!

    OriginalEl autor pixelbyaj

  5. -1

    para obtener el tamaño físico no se podía usar Javascript, pero con el uso de jQuery para obtener el tamaño de la pantalla

    $(document).ready(function(){
       var elem = document.createElement("div");
       $(elem).attr("id", "removeMe").css({"width":"100%", "height":"100%", "position":"absolute", "top":"0", "left":"0"});
       $("body")[0].append(elem);
    
       width = $("body #removeMe").width();
       height = $("body #removeMe").height();
       $("body #removeMe").remove();
    });

    De esta manera se consigue que el tamaño de Píxel de la pantalla. sin embargo me gustaría combinar esto con un móvil de verificación como @Abhi jQuery respuesta y que se necesita para colocar este código en una ventana de cambiar el tamaño de controlador de eventos de manera que si el móvil de la rotación de la pantalla está encendida y de que está activada la nueva contol de ingeniería

    OriginalEl autor Martin Barker

Dejar respuesta

Please enter your comment!
Please enter your name here