wykrywają różne platformy urządzeń za pomocą CSS

Chciałbym powiedzieć, że przeczytałem i próbowałem wiele odmian instrukcjami tutaj:wykrywają różne platformy urządzeń za pomocą CSS

Chciałbym mieć mojego użytku strona różne pliki CSS w zależności od używanego urządzenia. Widziałem wiele rozwiązań tego, wszystkie przy użyciu jakiejś formy powyższego.

Jednak podczas testowania w HTC Desire konsekwentnie uzyskuję wyjście przeznaczone na iPada lub całkowicie niefiltrowane wyjście. Obecnie mój kod testu opiera się na:

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

Oto mój plik 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>

A oto Krajobraz plik CSS iPada (będę zapewnić tylko, że tutaj wszyscy są w zasadzie taka sama:

div 
{ 
    display: none; 
} 

#ipadlandscape 
{ 
    display: inline; 
}

Chciałbym wiedzieć, jakie zmiany wprowadzić do elementów łączących, aby upewnić się, że iPad staje się tylko jego stylów, iPhone dostaje swój własny i (w tym przypadku) HTC Desire (lub sam Urządzenia rozdzielczości/aspektu) pobierają ten arkusz stylów.

Źródło

2011-11-07 Matt W

Cóż, po kilku (dużo więcej) zabawy i dodanie jakiegoś javascript, mam rozwiązanie - urządzenie robot nie został Wykorzystując rozdzielczość I wierzył, że to:

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

Źródło

2011-11-07 15:32:12

Jesteś ratowanie życia ... szukam zapytania o media skierowanego na iPada. Twój przykład działa idealnie! Dzięki! –

Należy pamiętać, że instrukcje 'device-width' i' device-height' działają tylko wtedy, gdy rozmiar ekranu ** dokładnie pasuje ** podanych liczb. Pamiętaj, że ten kod nie dotyczy innych urządzeń o podobnej wielkości, więc strona będzie dla nich zupełnie nieprzygotowana! Jeśli chcesz obsługiwać wszystkie inne urządzenia (również produkowane w przyszłości), powinieneś dołączyć kod dla nich, który używa przedrostków 'min-' i 'max-'. – Dan

Wiem, że jest trochę stary, ale próbowałem tego i odniosłem sukces, z wyjątkiem tego, że daje mi wymiary ekranu w lewym górnym rogu. Czy kod należy zmienić? –

wykrywają różne platformy urządzeń za pomocą CSS

Odpowiedz

Powiązane problemy