Estoy tratando de cargar un archivo css para ipad sólo. He intentado esto:

<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px)" type="text/css">

Funciona para el iPad, pero si me baja mi resolución de 1024 por 768 en mi escritorio y ver la página en firefox el ipad hoja de estilos cargas así. Así que he intentado:

<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px) and (orientation:landscape)" type="text/css">

Pero sigue el mismo problema. ¿Cómo puedo asegurarme de esta hoja de estilos SOLO carga si se ve la página en un iPad?

  • Estoy teniendo problemas para imaginar una buena razón para ello.
InformationsquelleAutor John | 2011-02-02

4 Comentarios

  1. 1

    Qué tecnología se está utilizando? Si usted tiene el control sobre lo que son la representación (lado del servidor) a la página que usted puede comprobar para el encabezado de AGENTE de USUARIO en la solicitud. Si contiene la cadena de iPad, a continuación, hacer el css de la etiqueta, si no, no la incluya.

    Si se acaba la entrega de html estático, esto no va a funcionar.

  2. 4

    De:
    http://css-tricks.com/snippets/css/ipad-specific-css/

    Esto funciona mejor para mí.

    @media only screen and (device-width: 768px) {

    /* Generales para el iPad diseños */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {

    /* Para el retrato diseños sólo */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {

    /* Para los diseños de paisaje sólo */
    }

    • No sé cómo esto se obtuvo 3 votos. La misma pregunta se refiere a los medios de comunicación el tamaño de la pantalla no se la respuesta, ya que NO es el iPad específicos, y se mete a la visualización de escritorio si el escritorio o el tamaño de la ventana cae en los mismos medios de comunicación de la declaración. Matto tenía la respuesta correcta para esta pregunta específica.
  3. 0

    Debido a diferentes resoluciones y tamaños de pantalla que yo no era capaz de utilizar los medios de consulta para este problema.

    Puedo incluir http://www.modernizr.com/ en todos mis proyectos ya, así que fue capaz de utilizar una combinación. Modernizr se agregue una clase de .toque en toque de los dispositivos habilitados. Me gustaría sugerir tratando de uso .toque para determinar que no es un PC, a continuación, la consulta de medios de comunicación para estrechar abajo ¿qué dispositivo móvil es.

    • Creo que esta es posiblemente una buena respuesta, no se si .toque también funciona para Windows 8+ táctil basada en sistemas. Mi escritorio es táctiles.
    • Definitivamente cada vez menos relevante como una solución a medida que más dispositivos táctiles. La solución no es necesario, pero funcionó como cinta adhesiva un par de veces para mí.

Dejar respuesta

Please enter your comment!
Please enter your name here