Rileva piattaforme per dispositivi diversi utilizzando i CSS

Mi piacerebbe dire che ho letto e provato molte variazioni delle istruzioni qui:Rileva piattaforme per dispositivi diversi utilizzando i CSS

vorrei avere i miei diversi file CSS utilizzare la pagina a seconda del dispositivo in uso. Ho visto molte soluzioni a questo, tutte utilizzando una qualche forma di cui sopra.

Tuttavia, quando si esegue il test su un HTC Desire, ottengo costantemente l'output previsto per iPad o un output completamente non filtrato. Attualmente, il mio codice di prova si basa su:

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

Ecco il mio file 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>

E qui è il file CSS Paesaggio dell'iPad (vi fornirò che solo qui in quanto sono tutti fondamentalmente lo stesso:

div 
{ 
    display: none; 
} 

#ipadlandscape 
{ 
    display: inline; 
}

mi piacerebbe sapere quali modifiche fare per gli elementi di collegamento al fine di garantire che l'iPad ottiene solo i fogli di stile, l'iPhone diventa una propria e (in questo caso) il desiderio di HTC (o sam e risoluzione/dispositivi di aspetto) ottenere quel foglio di stile.

fonte

2011-11-07 Matt W

Ebbene, dopo un po '(molto di più) giocando intorno e l'aggiunta di un po' di javascript, ho la soluzione - il dispositivo droide non stava usando la risoluzione ho creduto che fosse:

<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>

fonte

2011-11-07 15:32:12

Tu sei un salva la vita ... sono alla ricerca di media query per target iPad. Il tuo esempio funziona perfettamente! Grazie! –

Si noti che le istruzioni 'device-width' e' device-height' funzionano solo quando la dimensione dello schermo ** corrisponde esattamente ai ** numeri dati. Si prega di notare che questo codice non si applica ad altri dispositivi con dimensioni simili, quindi il sito sembrerà completamente non adattato a loro! Se vuoi supportare tutti gli altri dispositivi (anch'essi prodotti in futuro), dovresti includere un codice che utilizzi i prefissi 'min-' e 'max-'. – Dan

So che questo è un po 'vecchio, ma ho provato questo e ha avuto successo, tranne che mi dà le dimensioni dello schermo in alto a sinistra. Il codice deve essere cambiato? –

Rileva piattaforme per dispositivi diversi utilizzando i CSS

risposta

Problemi correlati