detectar diferentes plataformas de dispositivos usando CSS

me gustaría decir que he leído y probado muchas variaciones de las instrucciones aquí:detectar diferentes plataformas de dispositivos usando CSS

me gustaría tener mi página usa diferentes archivos CSS en función del dispositivo que se utilice. He visto muchas soluciones a esto, todas usando alguna de las formas anteriores.

Sin embargo, cuando pruebo en un HTC Desire obtengo consistentemente la salida para iPad o una salida completamente sin filtro. Actualmente, mi código de prueba se basa en:

http://www.cloudfour.com/ipad-css/

Aquí está mi archivo HTML:

<html> 
<head> 
    <title>orientation and device detection in css3</title> 

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" /> 
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" /> 

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

    <link rel="stylesheet" media="all and (device-width: 480px) and (device-height: 800px) and (orientation:landscape)" href="htcdesire-landscape.css" /> 
    <link rel="stylesheet" media="all and (device-width: 480px) and (device-height: 800px) and (orientation:portrait)" href="htcdesire-portrait.css" /> 

    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" /> 
</head> 
<body> 
    <div id="iphonelandscape">iphone landscape</div> 
    <div id="iphoneportrait">iphone portrait</div> 
    <div id="ipadlandscape">ipad landscape</div> 
    <div id="ipadportrait">ipad portrait</div> 
    <div id="htcdesirelandscape">htc desire landscape</div> 
    <div id="htcdesireportrait">htc desire portrait</div> 
    <div id="desktop">desktop</div> 
</body> 
</html>

Y aquí es archivo CSS paisaje del iPad (I solo facilitaremos que aquí, ya que son básicamente el mismo:

div 
{ 
    display: none; 
} 

#ipadlandscape 
{ 
    display: inline; 
}

me gustaría saber qué modificaciones para hacer que los elementos de enlace para asegurar que el iPad se pone sólo sus hojas de estilo, el iPhone tiene su propia y (en este caso) el HTC Desire (o sam e dispositivos de resolución/aspecto) obtienen esa hoja de estilo.

Fuente

2011-11-07 Matt W

Bueno, después de algunos (mucho más) de jugar y la adición de algo de JavaScript, tengo la solución - el dispositivo androide no estaba usando la resolución creía que era:

<html> 
<head> 
    <title>orientation and device detection in css3</title> 

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" /> 
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" /> 
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" /> 
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" /> 
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" /> 
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" /> 
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" /> 

</head> 
<body> 
    <div id="iphonelandscape">iphone landscape</div> 
    <div id="iphoneportrait">iphone portrait</div> 
    <div id="ipadlandscape">ipad landscape</div> 
    <div id="ipadportrait">ipad portrait</div> 
    <div id="htcdesirelandscape">htc desire landscape</div> 
    <div id="htcdesireportrait">htc desire portrait</div> 
    <div id="desktop">desktop</div> 
    <script type="text/javascript"> 
     function res() { document.write(screen.width + ', ' + screen.height); } 
     res(); 
    </script> 
</body> 
</html>

Fuente

2011-11-07 15:32:12

Usted es una salvavidas ... han estado buscando consultas de medios para dirigirse al iPad. ¡Tu ejemplo funciona perfectamente! ¡Gracias! –

Tenga en cuenta que las instrucciones 'device-width' y' device-height' solo funcionan cuando el tamaño de la pantalla ** coincide exactamente con ** los números dados. Tenga en cuenta que este código no se aplicará a otros dispositivos con un tamaño similar, por lo que el sitio se verá completamente desadaptado a ellos. Si desea admitir todos los demás dispositivos (también fabricados en el futuro), debe incluir un código para ellos que use los prefijos 'min-' y 'max-'. – Dan

Sé que esto es un poco viejo, pero probé esto y tuve éxito, excepto que me da dimensiones de pantalla en la parte superior izquierda. ¿Es necesario cambiar el código? –

detectar diferentes plataformas de dispositivos usando CSS

Respuesta

Cuestiones relacionadas