He estado tratando de detectar un iPhone o iPad puramente por la hoja de estilos. He probado la solución que se ofrece aquí mediante el uso de @media de mano, sólo screen and (max-device-width: 480px) {.

Sin embargo, esto no parece funcionar. Alguna idea?

InformationsquelleAutor FLX | 2010-10-01

5 Comentarios

  1. 24

    Esta es la forma en que manejamos el iPhone (y similares) de los dispositivos [no iPad]:

    En mi archivo CSS:

    @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
       /* CSS overrides for mobile here */
    }

    En la cabeza de mi documento HTML:

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    • Hay no de medios de consulta de manera de hacer esto? Puesto que el iPad Safari tiene este bug-función de donde se re-tamaños de las grandes imágenes de fondo para el 50% y este error-característica no existe en otros pequeños píxeles de los navegadores. Así que uno necesita algo como IE condicionales para el iPad? Así que me podría apuntar sólo el iPad/iPhone safari?
    • No use este, nunca conjunto user-scalable=no
    • Estoy de acuerdo con bfred.aquí. user-scaleable=no no es una buena práctica.
    • No estoy de acuerdo en que el «nunca» se parte para el usuario escalable. Si usted está construyendo un nativo como responsive web de la aplicación, teniendo en ella el usuario escalable sólo puede causar problemas. Si se diseñan correctamente, no debería ser nunca una necesidad de que el usuario desee hacer zoom in/out.
    • estás en lo correcto, este es un buen caso de uso para este atributo. Pero es claramente incorrecta en el contexto de la original de preguntas y respuestas.
  2. 29

    iPhone & iPod touch:

    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />

    iPhone 4 & iPod touch 4G:

    <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

    iPad:

    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
    • El iPad de detección tiene un problema: que los netbooks, que suelen tener pantallas de 1024 x 600 1024 x 768 y se verán afectados por este CSS también.
    • Nunca detectar dispositivos específicos. Los nuevos dispositivos que salen cada mes y estos números cambian.
  3. 14

    Es posible que desee probar la solución de este O’Reilly artículo.

    La parte importante son estas consultas de medios CSS:

    <link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
    <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 
    <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> 
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css"> 
    • Aunque esto, en teoría, puede responder a la pregunta, sería preferible para incluir las partes esenciales de la respuesta aquí, y proporcionar el enlace de referencia.
    • el Lagarto: Gracias por decírmelo, han actualizado la respuesta.
  4. 14

    Yo uso estos:

    /* Non-Retina */
    @media screen and (-webkit-max-device-pixel-ratio: 1) {
    }
    
    /* Retina */
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
    }
    
    /* iPhone Portrait */
    @media screen and (max-device-width: 480px) and (orientation:portrait) {
    } 
    
    /* iPhone Landscape */
    @media screen and (max-device-width: 480px) and (orientation:landscape) {
    }
    
    /* iPad Portrait */
    @media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    }
    
    /* iPad Landscape */
    @media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    }

    http://zsprawl.com/iOS/2012/03/css-for-iphone-ipad-and-retina-displays/

    • Añadido», y (max-device-width: 1024px)» condición para el iPad.
    • ¿Qué sucede si usted tiene un dispositivo Android que tiene un ancho de 460px?
  5. 3

    Muchos dispositivos con diferentes tamaños de pantalla/ratios/resoluciones han salido incluso en los últimos cinco años, incluyendo nuevos tipos de iPhones y iPads. Sería muy difícil para personalizar un sitio web para cada dispositivo.

    Mientras tanto, consultas de medios para device-width, device-height, y device-aspect-ratio se han quedado obsoletos, por lo que pueden no funcionar en futuras versiones del navegador. (Fuente: MDN)

    TLDR: Diseño basado en el navegador anchos, y no de los dispositivos. He aquí una buena introducción a este tema.

    • Dispositivo-consultas específicas que se requieren para la solución específica del dispositivo errores.

Dejar respuesta

Please enter your comment!
Please enter your name here