Mam tę @media
konfigurację:
HTML :
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
CSS :
@media screen and (min-width: 769px) {
/* STYLES HERE */
}
@media screen and (min-device-width: 481px) and (max-device-width: 768px) {
/* STYLES HERE */
}
@media only screen and (max-device-width: 480px) {
/* STYLES HERE */
}
Przy tej konfiguracji działa na iPhonie, ale nie działa w przeglądarce.
Czy to dlatego, że mam już device
metę, a może max-width:480px
zamiast tego?
css
mobile
media-queries
rallybilen
źródło
źródło
@media screen and (min-width:769px){
wokół swoich normalnych stylów przeglądarki980px
nie960
ze względu na końcach rozmiar przeglądarki980px
.Odpowiedzi:
Znalazłem najlepszą metodę, aby napisać domyślny CSS dla starszych przeglądarek, ponieważ starsze przeglądarki, w tym np. 5.5, 6, 7 i 8. Nie mogą czytać @media. Kiedy używam @media, używam tego w następujący sposób:
Ale możesz robić, co chcesz, za pomocą @media. To tylko przykład tego, co znalazłem dla mnie najlepsze, gdy budowałem style dla wszystkich przeglądarek.
Specyfikacja iPada CSS.
Również! Jeśli szukasz możliwości drukowania, możesz użyć
@media print{}
źródło
Podstawowym problemem jest używanie
max-device-width
vs zwykły starymax-width
.Użycie słowa kluczowego „urządzenie” wskazuje na fizyczny wymiar ekranu, a nie na szerokość okna przeglądarki.
Na przykład:
Przeciw
źródło
Jeśli witryna na małych urządzeniach zachowuje się jak ekran komputera, musisz wcześniej umieścić ten metatag w nagłówku
W przypadku zapytań o media możesz ustawić to jako
obejmie to wszystkie szerokości twojego telefonu komórkowego
Na iPada i iPada pro musisz użyć
Jeśli chcesz dodać css do trybu poziomego, możesz to dodać
i (orientacja: krajobraz)
źródło
Prawidłowa wartość
content
atrybutu powinnainitial-scale
zamiast tego zawierać :źródło
w przypadku niektórych iPhone'ów musisz tak ustawić swoją rzutnię
źródło