Jaka jest różnica między „ekranem” a „tylko ekranem” w zapytaniach o media?

Jaka jest różnica między screeni only screenw zapytaniami mediów?

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />

Dlaczego musimy korzystać only screen? Czy screensam w sobie nie zapewnia wystarczającej ilości informacji, aby można je było wyświetlić tylko na ekranie?

Widziałem wiele responsywnych stron internetowych korzystających z jednego z tych trzech różnych sposobów:

@media screen and (max-width:632px)

@media (max-width:632px)

@media only screen and (max-width:632px)

Podzielmy twoje przykłady jeden po drugim.

@media (max-width:632px)

Ten mówi o oknie max-widtho rozdzielczości 632px, że chcesz zastosować te style. Przy takim rozmiarze w większości przypadków mówisz o czymkolwiek mniejszym niż ekran pulpitu.

@media screen and (max-width:632px)

To mówi o urządzeniu z screenoknem max-widtho rozdzielczości 632px. Jest to prawie identyczne z powyższym, z tą różnicą, że określasz screenw przeciwieństwie do innych dostępnych typów nośników najczęściej występujący inny print.

@media only screen and (max-width:632px)

Oto cytat prosto z W3C, aby to wyjaśnić.

Słowo kluczowe „tylko” może być również użyte do ukrycia arkuszy stylów przed starszymi klientami użytkownika. Programy klienckie muszą przetwarzać zapytania o media zaczynające się od „tylko”, tak jakby słowo kluczowe „tylko” nie było obecne.

Ponieważ nie ma takiego typu multimediów jak „tylko”, arkusz stylów powinien być ignorowany przez starsze przeglądarki.

Oto link do cytatu pokazanego w przykładzie 9 na tej stronie.

Mam nadzieję, że rzuci to nieco światła na zapytania mediów.

EDYTOWAĆ:

Koniecznie sprawdź @hybrids doskonałą odpowiedź na to, jak onlysłowo kluczowe jest naprawdę obsługiwane.

Poniższe dokumenty pochodzą z dokumentów Adobe .

Specyfikacja zapytań o media zawiera również słowo kluczowe only, które ma ukrywać zapytania o media ze starszych przeglądarek. Słowo notkluczowe musi znajdować się na początku deklaracji. Na przykład:

media="only screen and (min-width: 401px) and (max-width: 600px)"

Przeglądarki, które nie rozpoznają zapytań o media, oczekują rozdzielonej przecinkami listy typów mediów, a specyfikacja mówi, że powinny one obcinać każdą wartość bezpośrednio przed pierwszym niealfanumerycznym znakiem, który nie jest łącznikiem. Tak więc stara przeglądarka powinna interpretować powyższy przykład w następujący sposób:

media="only"

Ponieważ nie ma takiego typu multimediów jak tylko, arkusz stylów jest ignorowany. Podobnie stara przeglądarka powinna interpretować

media="screen and (min-width: 401px) and (max-width: 600px)"

tak jak

media="screen"

Innymi słowy, powinien stosować reguły stylu do wszystkich urządzeń ekranowych, nawet jeśli nie wie, co oznaczają zapytania o media.

Niestety IE 6–8 nie wdrożył poprawnie specyfikacji.

Zamiast stosować style do wszystkich urządzeń ekranowych, całkowicie ignoruje arkusz stylów.

Mimo tego zachowania nadal zaleca się prefiksowanie zapytań o media tylko wtedy, gdy chcesz ukryć style przed innymi, mniej popularnymi przeglądarkami.

Tak, używając

media="only screen and (min-width: 401px)"

i

media="screen and (min-width: 401px)"

będzie mieć taki sam efekt w IE6-8: oba zapobiegną użyciu tych stylów. Będą jednak nadal pobierane.

Ponadto w przeglądarkach obsługujących zapytania o media CSS3 obie wersje załadują style, jeśli szerokość rzutni jest większa niż, 401pxa typ multimediów to screen.

Nie jestem całkowicie pewien, które przeglądarki, które nie obsługują zapytań o media CSS3, będą potrzebować onlywersji

media="only screen and (min-width: 401px)" 

w przeciwieństwie do

media="screen and (min-width: 401px)"

aby upewnić się, że nie jest to interpretowane jako

media="screen"

Byłby to dobry test dla kogoś, kto ma dostęp do laboratorium urządzeń.

Aby stylizować na wiele smartfonów z mniejszymi ekranami, możesz napisać:

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

Aby zablokować przeglądanie starszych arkuszy stylów przez iPhone'a lub telefon z Androidem, możesz napisać:

@media only screen and (max-width: 480px;) { … } 

Przeczytaj ten artykuł, aby uzyskać więcej informacji http://webdesign.about.com/od/css3/a/css3-media-queries.htm

Odpowiedź @hybrid jest dość pouczająca, z tym że nie wyjaśnia celu wspomnianego przez @ashitaka „A co, jeśli zastosujesz podejście Mobile First? Więc najpierw mamy mobilny CSS, a następnie używamy min-width do kierowania reklam na większe witryny. Nie powinniśmy używać jedynego słowa kluczowego w tym kontekście, prawda? ”

Chciałbym dodać tutaj, że celem jest po prostu zapobieganie używaniu przez przeglądarki nieobsługujące tego innego stylu urządzenia, tak jakby zaczynał się od „ekranu”, bez wzięcia go na ekran, gdzie tak, jakby zaczynał się od „tylko” stylu, zostanie zignorowany.

Odpowiadając na ashitaka, rozważ ten przykład

<link rel="stylesheet" type="text/css" 
  href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" 
  href="desktop.css" media="screen and (min-width: 481px)" />

Jeśli nie użyjemy „tylko”, nadal będzie działać, ponieważ styl pulpitu będzie również używany w uderzających stylach Androida, ale z niepotrzebnym narzutem. W takim przypadku JEŻELI przeglądarka nie obsługuje, nastąpi powrót do drugiego arkusza stylów, ignorując pierwszy.

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

screentutaj jest ustawienie rozmiaru ekranu zapytania o media. Np. Maksymalna szerokość obszaru wyświetlania wynosi 480 pikseli. Określa ekran w przeciwieństwie do innych dostępnych typów mediów.

@media only screen and (max-width: 480px;) { … } 

only screen tutaj służy do zapobiegania stosowaniu określonych stylów przez starsze przeglądarki, które nie obsługują zapytań o media z funkcjami mediów.