Zapytania o media CSS dla Galaxy S3

Question

Ktoś wie, jak kierować reklamy na Samsung Galaxy S3 za pomocą zapytań o media?

Obecnie używam:

iPad

<link rel="stylesheet" media="all and (device-width: 768px)"            href="css/device-768.css"/> 

Inne tablety

<link rel="stylesheet" media="all and (max-device-width: 767px) and (min-device-width: 641px)" href="css/device-max767.css"/> 

Telefony (użyj zrobił S3 to - nie wiem dlaczego)

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1)" href="css/phones.css"/> 

ja również przetestowany

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="css/phones.css"/> 

ale nie działał ...

Answer 1

mam założyć stronę, która pokazuje, jak każde urządzenie będzie reagować na zapytania mediów, dając wartości funkcji multimedialnych. Wystarczy odwiedzić stronę z urządzenia chcesz przetestować:

http://pieroxy.net/blog/pages/css-media-queries/test-features.html

Stamtąd można zdecydować, które zapytanie multimedialny, którego chcesz użyć w oparciu o jakie różnych urządzeń raportu. Pamiętaj, że generalnie kierowanie na określone urządzenia jest złym pomysłem. Powinieneś raczej kierować się wymiarami i gęstością wyświetlania, aby Twoja strona dostosowała się do powierzchni.

Answer 2

Jak wspomniano wcześniej. Użyj tego Media Query detector w telefonie, a także zastanów się nad lepszym projektowaniem płynów - hacki CSS nie są dobre - nie powinieneś ich potrzebować w 90% scenariuszy, jeśli masz dobry projekt płynów.

Samsung Galaxy S3

@media only screen and (max-device-width: 720px) and (orientation:portrait) { 
    .your-css{} 
} 

@media only screen and (max-device-width: 1280px) and (orientation:landscape) { 
    .your-css{} 
} 

Answer 3

użyłem tego kierować tylko widok portret na s3:

@media only screen and (min-device-width : 719px) and (max-device-width : 721px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait) { 

} 

Answer 4

myślę, że to byłoby bezpiecznie stosować do większości telefonów z dzisiaj (HTCs, iPhone, Samsung), unikając jednocześnie popularnych szerokości tabletów (iPad iPad 3/4 iOS 6 ma 672px na portret).

<link rel='stylesheet' href='/Styles/device_phone.css' media='screen and (max-width: 640px)'/> 

Ten telefon będzie dziwne ryby:

Samsung Nexus S Android Browser 2.3.6 Zdjęcie który ma szerokość: 480px, wysokość: 800px (max-width 800)

Generalnie nie zaleca się kierowania na określone urządzenia, ale jeśli naprawdę chcesz kierować na nietypowe ryby, możesz mieć inne unikalne cechy. Osobiście wolę używać maksymalnej szerokości, ponieważ mogę testować bezpośrednio na moim pulpicie i na szerokoekranowym ekranie, a nie widzę widoku użytkownika mobilnego, jeśli naprawdę zmienił rozmiar przeglądarki na mniej niż 640.

odniesienia: http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

Answer 5

Galaxy S I & II: 320 x 533, w układzie pionowym (CSS gęstość pikseli wynosi 1.5)

Samsung Galaxy S III: 360 x 640, w trybie pionowym

Answer 6

Zapomnij wszystko to "max-device-width" "min-height", itd, szarlataneria Problem polega jesteście! nie projektując pod względem wymiarów urządzenia. Ponadto Galaxy S3 według Samsunga ma gęstość pikseli równą 2, co oznacza, że ​​fizyczny ekran mapuje 1 piksel urządzenia na 2 piksele CSS. Jeśli to prawda, rozdzielczość 720x1280 jest tylko rozdzielczością logiczną, a nie rzeczywistą fizyczną rozdzielczością urządzenia! Dotyczy to również Apple iphone 4 o określonej rozdzielczości 640x960px, która jest w rzeczywistości rozdzielczością logiczną, a nie rzeczywistą rozdzielczością rzeczywistego urządzenia. Prawdziwa rozdzielczość fizyczna dla iPhone'a to połowa tej liczby, biorąc pod uwagę gęstość pikseli, co oznacza, że ​​jej fizyczne wymiary wynoszą faktycznie 320x480, co jest prawdą, ponieważ cały czas używam tego kodu!

Dlatego też, jeśli S3 ma również gęstość pikseli równą 2, wówczas jego prawdziwa natywna rozdzielczość wynosi faktycznie 360x640px, a NIE 720x960, jak stwierdził Samsung. Ponownie urządzenie mapuje 2 piksele CSS na 1 piksel urządzenia! Poza tym, dlaczego na Ziemi ludzie używają zmiennych zapytań o media, znachorstwo, mówię wam!

@media screen and (device-width: 360px) and (device-height: 640px) and (orientation: portrait) { 

Style iść tutaj }

@media screen and (device-width: 640px) and (device-height: 360px) and (orientation: landscape) { 

Style tutaj } OR: Można tylko stwierdzić, rozdzielczość logiczny, który został dostarczony przez firmę Samsung, Duh !, rocket science prawo?

@media screen and (width: 720px) and (height: 1280px) and (orientation: portrait) { 

Style }

@media screen and (width: 1280px) and (height: 720px) and (orientation: landscape) { 

Style } Bardzo proste! To wszystko. Ludzie zastanawiają się, dlaczego nie mogą korzystać z zapytań o media, ale używają tych wszystkich zmiennych wartości. Spróbuj właściwie ustawić rozdzielczość urządzenia. Nie ma powodu, by kiedykolwiek używać wartości zmiennych, takich jak "maksymalna szerokość", itp.

Answer 7

W tym czasie urządzenia mobilne poprawiły się tak bardzo, że ich rozdzielczości ekranu są podobne, a czasami nawet lepsze niż rozdzielczości ekranów stacjonarnych.

Na przykład Galaxy S4 firmy Samsung ma 1080X1920 pikseli - ekran Full HD!

Ale w responsywnej konstrukcji sprawdzamy rozdzielczość i musimy dopasować się do rozdzielczości, a jeśli spróbujesz dodać zapytanie o media, powiedzmy min-width of 1000px i sprawdź na Samsung Galaxy S4 zobaczysz, że nic się nie stało.

Powodem jest to, że ruchomy ekran o wysokiej gęstości ma dwa aspekty pikseli.

Prawdziwa rozdzielczość Pierwsza rozdzielczość to prawdziwa rozdzielczość fabryczna, przeznaczona głównie do filmów i zdjęć. w Samsung Galaxy S4 prawdziwa rozdzielczość to 1080X1920.

Rozdzielczość CSS Druga rozdzielczość dotyczy przeglądarki. i dla nas programistów oznacza to, że musimy działać inaczej, a nie zgodnie z rzeczywistą rozdzielczością ekranu. w Samsung Galaxy S4 rozdzielczość CSS wynosi 360X640.Rozdzielczość

Samsung Galaxy S4: rzeczywistym Rozdzielczość: 1080X1920 rozdzielczość CSS: 360x640

Jak zdobyć rozdzielczość CSS? W Wikipedii masz wszystkie tablice rozdzielczości urządzeń mobilnych (tablety i urządzenia mobilne). http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

/*(ldpi) Android*/ 
@media only screen and (-webkit-device-pixel-ratio:.75){ 

    /*CSS */ 
} 

/*(mdpi) Android*/ 
@media only screen and (min-device-width : 480px) and (max-device-width : 800px) { 

    /*CSS */ 
} 

/*(hdpi) Android*/ 
@media only screen and (-webkit-device-pixel-ratio:1.5){ 

    /*CSS */ 

} 

Answer 8

Na moim Samsung S3 z Androidem 4.1.2, podczas gdy próbowałem wszystkie funkcje zapytań mediów (max-wysokość, szerokość, wysokość i szerokość urządzenia, a nawet kolor: 8) tylko ten pracował dla mnie oprócz do druga odpowiedź powyżej w tej strony:

Samsung S3 domyślną przeglądarką

/* Samsung S3 default browser portrait*/ 
@media only screen and (device-width: 720px) and (device-height: 1280px) and (orientation: portrait) { 
body { background:yellow;} 
} 

/* Samsung S3 default browser landscape */ 
@media only screen and (device-width: 1280px) and (device-height: 720px) and (orientation: landscape) { 
body { background:#000;} 
} 

Here is a screenshot do testu narzędzie diagnostyczne pieroxy zapytania mediów. Uwaga: obie działają bez orientacji, ale nie zmieniają właściwości bez ładowania/odświeżania.

Nadzieja to pomaga bez konfliktu z innymi zapytaniami można użyć

Answer 9

ten został przetestowany i działa.

@media only screen and 
(device-width: 720px) and 
(device-height: 1280px) and 
(-webkit-min-device-pixel-ratio: 2)