2012-07-13 13 views
5

Czy ktoś zna dobry współczesny hak CSS, by kierować tylko na mobilne safari na iPhone'a i iPoda Touch?Mobilne Safari na iPhone/iPodzie CSS hackowanie

Wciąż widzę @media screen and (max-device-width: 480px), ale to sprzed 3 lat i pasuje teraz Nexusa S.

(Jest to naprawić subtelną kwestię układu. Zdaję sobie sprawę, przeglądarka wąchania jest zła itd)

Odpowiedz

8

http://cssuseragent.org i witamy na Ciemnej Stronie.

+0

Dzięki, ugryzę kulę i użyję tego, ponieważ nie będzie to ostatni raz, kiedy potrzebuję haka CSS tutaj. – mahemoff

+0

+1 za opublikowanie rozwiązania typu "modernizator" dla hakerów agentów użytkownika, który (prawdopodobnie) będzie aktualizowany/konserwowany i nie zawiedzie się z dnia na dzień ... jak wszyscy inni prawdopodobnie mogli/będą. – benzkji

3

Można użyć only screen and (-webkit-min-device-pixel-ratio: 2)

+2

kierowana na I mój Nexus 4 z Chrome –

0

jedyną drogę do ściśle określonych urządzeń w sieci jest sprawdzenie ciągi agenta użytkownika . Wszystkie urządzenia Apple mają swoją nazwę w ciągu znaków agenta użytkownika. na przykład iphone będzie miał "iphone", a ipod będzie miał "ipod". Użyj tego, aby dynamicznie zastosować lub załadować css.

1

Możesz również poprosić o numer -webkit-min-device-pixel-ratio: 2. Nie sądzę, że istnieją przeglądarki, które zgłaszają w tym momencie wartość wyższą niż 2 (chociaż niektóre raporty są niższe, więc należy użyć współczynnika minimalnego) - nie dotyczy to jednak urządzeń iPhone Touch 3GS i innych urządzeń iPod touch. W tym celu musiałbyś coś wąchać.

0

Jeśli wystarczy kierować Safari w sieciach komórkowych, po prostu dodaj zapytania mediów do tego Hack:

@media screen and (max-width: 767px) { 
    _::-webkit-full-page-media, _:future, :root .safari_only { 
     padding: 10px; //or any property you need 
    } 
} 

I nie zapomnij dodać .safari_only klasy do elementu, który chcesz kierować Przykład:

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari </div> 

Jeden szczegół: to będzie wpływać również przeglądarkę Safari na urządzeniach z Androidem, ale ... w każdym razie, którzy korzystają z Safari na urządzeniu z systemem Android :)

Powiązane problemy