Jak kierować iPhone 3GS i iPhone 4 w jednym zapytaniu o media?

Próbuję zaimplementować alternatywne układy zarówno dla iPada/iPhone 'a, jak i starszych iphone' ów.

Ustaliłem, że najlepszą metodą jest użycie @media ze specyfikacji CSS3.

Jako takie są moje zapytania medialne w tej chwili: 

@media screen and (max-width: 1000px) { ... }

Powyżej jest dla małych ekranów komputerów stacjonarnych i laptopów.

@media screen and (max-width: 700px) { ... }

Powyżej jest dla iPada i bardzo małych ekranów stacjonarnych / laptopów.

@media screen and (max-device-width: 480px) { ... }

Powyżej jest dla iPhone 3GS - i urządzeń mobilnych w ogóle.

[[6]}jednak nowe iPhone 4 ze śpiewającym i tańczącym wyświetlaczem "retina" Steve ' a Jobsa oznacza, że ma stosunek pikseli 2-1, co oznacza, że 1 piksel faktycznie pojawia się w przeglądarce jako 2x2 pikseli, co oznacza, że jego rozdzielczość (960x640 - co oznacza, że uruchomi układ iPada, a nie Układ urządzenia mobilnego), więc wymaga to innego zapytania o media (tylko do tej pory obsługiwane przez webkit): {]} 
@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }
Rzecz w tym... Chcę mój ładny lśniący nowy układ iPhone 4 połączony z iPhone 3GS i układem urządzeń mobilnych, ponieważ oba mają dokładnie ten sam wewnętrzny kod CSS,

Dlatego moje pytanie;

Jak utworzyć regułę @media, która wskazuje zarówno iPhone 4, 3GS, jak i inne telefony komórkowe na te same style?

Author: BoltClock, 2011-02-17
Source

4 answers

[[3]}ponieważ iPhone i iPod Touch mierzą max-device-width w pikselach logicznych, a nie fizycznych, nawet z wyświetlaczem Retina (jak powinny), oryginalne Zapytanie o media używane dla iPhone ' a powinno wystarczyć: 

@media only screen and (max-device-width: 480px) {
    /* iPhone CSS rules here */
}

Będziesz potrzebował tylko (-webkit-min-device-pixel-ratio: 2), jeśli musisz celować oddzielnie na wyświetlacz siatkówki.

 54
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-04 17:35:34

Odpowiedź Boltclocka wydaje mi się w tej chwili całkiem dobra.

Jednak, myśląc w przyszłości, jeśli Apple (lub inny producent) wyda inne urządzenie o współczynniku pikseli urządzenia wynoszącym 2, to Zapytanie o media będzie również używane dla tego urządzenia.

Myślę, że nie jest wykluczone zakładanie, że tak się stanie, a nowe urządzenie może mieć znacznie większy ekran, taki jak iPad z wyświetlaczem retina.

Aby to zapytanie dotyczyło tylko iPhone ' a 4 i poprzednie iPhone ' y (i inne urządzenia o podobnej wielkości) 

@media screen and (max-device-width: 480px), screen and (max-device-width: [[IPHONE_4_WIDTH]]px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone CSS rules here */
}

Niepewny [[IPHONE_4_WIDTH]] w tej chwili - nie mam żadnego na mnie, a niektóre strony mówią 480, niektórzy mówią 960. Spróbuj zastąpić obiema. (I daj znać co znajdziesz :))

 6
Author: mattbilson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-19 02:28:32

[[2]}szukałem sposobu, aby konkretnie celować iPhone 3 / 3GS w drugiej części prośby. Najbardziej akceptowalnym rozwiązaniem, jakie znalazłem, jest dostosowanie zapytań o media do stałych parametrów iPhone ' a 3.

@media only screen 
    and (device-width:320px) 
    and (device-height:480px) 
    and (-webkit-device-pixel-ratio: 1) { ... }

Aby wykonać to zapytanie wymaga, aby użyć znacznika Safari viewport meta , aby zmienić przeglądarkę na 100% za pomocą następujących ustawień: 

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Istnieje niewielka liczba telefonów z Androidem, które również zostaną odebrane w tym zapytaniu. Z Android Market pokazuje 18.4% aktywnych telefonów w potencjalnym zakresie wielkości ekranu 320x480, tylko podzbiór, który będzie pasował do stosunku urządzenie-piksel w przeglądarce internetowej akcji. Nie idealne, ale lepsze to niż nic.

Listy rozdzielczości telefonu

Wszystkie informacje zostały wzięte pod uwagę od daty postu.

Również za komentarz mernena #2 do jego posta tutaj są dokumenty do kierowania urządzeń z Androidem przez gęstość pikseli: http://developer.android.com/guide/webapps/targeting.html#DensityCSS

 5
Author: dalethedeveloper,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-21 20:24:03

Nie jestem pewien, czy nadążam za twoim pytaniem. Próbowałeś swoich zapytań na iPhone 4? device-width jest mierzona w pikselach logicznych, a nie fizycznych, więc iPhone 4 nadal spełnia kryteria max-device-width: 480px.

[1]}to samo dotyczy wysokiej klasy smartfonów z Androidem, które mają współczynnik pikseli 1.5: Nexus One ma fizyczny ekran 480x800, logiczny ekran 320x533.
 4
Author: mernen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-21 13:09:14