Zapytania o media - przeglądarka mobilna a przeglądarka pulpitu
Widziałem wiele witryn, które reagują zarówno na przeglądarki komputerów stacjonarnych, jak i przeglądarki na telefony komórkowe, pracuję nad witryną i mam następujące ustawienia arkusza stylów: (Witryna Hicks Design jest dobrym przykładem tego, co chcę osiągnąć, jeśli taki jest potrzebny) )
/* Normal styles go here */
@media screen and (min-device-width:321px)
{
/* Styles */
}
@media screen and (min-width:701px)
{
/* Styles */
}
@media screen and (min-width:1025px)
{
/* Styles */
}
@media screen and (min-width:2049px)
{
/* Styles */
}
Jednak mój arkusz stylów wydaje się działać tylko na przeglądarkach komputerowych. (przetestowane z Android Firefox i domyślną przeglądarką Android na Sony Xperia Ray)
Reguły strony projektu Hicksa są bardzo podobne do moich, jednak używają min i max, ale dla mnie nie działa na przeglądarkach mobilnych i komputerowych. (Planuję zoptymalizować moje zapytania o media więcej, staram się tylko, aby podstawy działały tak, jak tego chcę).
Jeśli używam max-device-width zamiast max-width, to staje się ono aktywne w przeglądarkach mobilnych, ale nie w przeglądarkach desktopowych ...
Próbowałem rozwiązać następujące problemy:
@media screen and (max-width:480px), screen and (max-device-width:480px)
{
/* Styles */
}
również:
@media screen and (max-width:480px), and (max-device-width:480px)
{
/* Styles */
}
Jednak nie sądzę, aby którykolwiek z nich był poprawny, ponieważ narzekanie na pasek narzędzi programistycznych dla Firefoksa narzeka. Wypróbowałem też kilka odmian powyższych reguł, ale wciąż nie mogę go uruchomić.
Z tego, co rozumiem, max-width odczytuje szerokość rzutni (powiedzmy .. szerokość okna przeglądarki), a max-device-width odczytuje rzeczywistą szerokość ekranu, którego używasz do przeglądania strony. - Jestem zdezorientowany, dlaczego maksymalna szerokość nie wygląda na szerokość przeglądarki w telefonie komórkowym.
Myślę, że prawdopodobnie brakuje mi tutaj czegoś oczywistego na temat zapytań o media ... Wydaje się, że nie ma sensu, że jeśli chcę, aby moja strona reagowała na przeglądarki na komputery i telefony komórkowe, muszę zrobić kopię wszystkich moich zapytań o media i po prostu zmienić zapytanie z 'screen i (max-width)' do 'screen i (max-device-width)' lub odwrotnie. (czego wstydzę się nawet wpisać jako obejście tutaj)
Jak mogę połączyć reguły (max-width) i (max-device-width) lub jak to osiągnąć?
Jeśli wolisz nie czytać wszystkich powyższych:
Używam ekranu @media i (max-width: 480px), ale wydaje się, że jest to tylko ekran @media i (max-device-width: 480px) działa na telefonach komórkowych. Jak mogę połączyć obie te zasady, aby uzyskać responsywny projekt na przeglądarkach mobilnych i komputerowych?