W style.css używam zapytań o media, które wykorzystują różne odmiany:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
Po zmniejszeniu okna strony zmieniają rozmiar na pożądany przeze mnie w zwykłej przeglądarce (Safari, Firefox), jednak układ mobilny wcale nie jest wyświetlany na telefonie. Zamiast tego widzę tylko domyślny CSS.
Czy ktoś może skierować mnie we właściwym kierunku?
html
css
media-queries
mobile-website
redconservatory
źródło
źródło
px
w@media (max-width: 320px)
.Odpowiedzi:
Wszystkie trzy były pomocne, ale wygląda na to, że musiałem dodać metatag:
Teraz wydaje się, że działa zarówno na Androidzie (2.2), jak i na iPhonie ...
źródło
Nie zapomnij mieć standardowych deklaracji css powyżej zapytania o media, w przeciwnym razie zapytanie również nie będzie działać.
źródło
Podejrzewam, że słowo kluczowe
only
może być tutaj problemem. Nie mam problemów z używaniem takich zapytań o media:@media screen and (max-width: 480px) { }
źródło
użyłem bootstrap w witrynie prasowej, ale nie działa na IE8, użyłem javascript css3-mediaqueries.js, ale nadal nie działa. jeśli chcesz, aby zapytanie o media działało z tym plikiem javascript, dodaj ekran do wiersza zapytania o media w css
Oto przykład :
css Linia łącza tak prosta jak powyżej linii.
źródło
Dzisiaj miałem podobną sytuację. Zapytanie o media nie działało. Po chwili zauważyłem, że brakuje miejsca po „i”. Prawidłowe zapytanie o media powinno wyglądać następująco:
źródło
Ważna jest również sekwencyjna kolejność kodu css, na przykład:
powyższy kod nie będzie działał, ponieważ wykonane zamówienie. Musisz napisać w następujący sposób :
źródło
Zawsze wymieniaj maksymalną i minimalną szerokość w niektórych jednostkach, takich jak px lub rem. To mnie wymyśliło. Jeśli napiszę to bez jednostki i tylko wartości liczbowej, przeglądarka nie będzie mogła odczytać zapytań o media. przykład: to źle @ ekran tylko dla mediów i (maks. szerokość: 950) i to jest ekran @ tylko dla mediów i (maks. szerokość: 950 pikseli)
źródło
Rzucanie kolejnej odpowiedzi na pierścień. Jeśli próbujesz użyć zmiennych CSS, to po cichu zawiedzie.
Zmienne CSS nie działają w zapytaniach o media (według projektu).
źródło
Dziwny powód, którego nigdy wcześniej nie widziałem: jeśli używasz selektora „rodzic> dziecko” poza zapytaniem o media (w Firefoksie 69), może to przerwać zapytanie o media. Nie jestem pewien, dlaczego tak się dzieje, ale w moim przypadku nie zadziałało ...
Ale dodanie elementu nadrzędnego w celu dopasowania do innego CSS w dalszej części strony, to działa ...
Wydaje się, że określenie rodzica nie powinno mieć znaczenia, ponieważ identyfikator jest bardzo konkretny i nie powinno być dwuznaczności. Może to błąd w Firefoksie?
źródło
Fragment kodu OP wyraźnie używa poprawnego znacznika komentarza, ale CSS może pękać w sposób progresywny - więc jeśli wystąpi błąd składniowy, wszystko po tym prawdopodobnie zawiedzie. Kilka razy korzystałem z wiarygodnych źródeł, które podały niepoprawne znaczniki komentarzy, które złamały mój arkusz stylów. Ponieważ OP dostarczył tylko niewielką część swojego kodu, proponuję następujące:
Upewnij się, że wszystkie komentarze CSS używają tego znacznika
/*
...*/
- który jest poprawnym znacznikiem komentarza dla css według MDNSprawdź poprawność swojego css za pomocą lintera lub bezpiecznego walidatora online. Oto jeden z W3
Więcej informacji: poszedłem sprawdzić najnowsze zalecane punkty przerwania dla zapytań o media z bootstrap 4 i skończyłem kopiowanie płyty kotła bezpośrednio z ich dokumentów. Prawie każdy blok kodu był opatrzony komentarzami w stylu javascript
//
, które złamały mój kod - i dały mi tylko tajemnicze błędy kompilacji, z którymi mogłem rozwiązywać problemy, które w tym czasie przeszły mi przez głowę i spowodowały smutek.Edytor tekstu IntelliJ pozwolił mi skomentować określone wiersze css w pliku LESS za pomocą skrótu ctrl + /, co było świetne, z tym że
//
domyślnie wstawia nierozpoznane typy plików . To nie jest darmowy i mniej jest raczej głównym nurtem, więc zaufałem temu i poszedłem z tym. To złamało mój kod. Istnieje menu preferencji umożliwiające nauczenie poprawnego oznaczania komentarzy dla każdego rodzaju pliku.źródło
Dołączenie metatagu, takiego jak poniżej, może spowodować, że przeglądarka będzie inaczej obsługiwać powiększanie widoku.
<meta content="width=device-width, initial-scale=1" name="viewport" />
źródło
Ostatnio spotkałem się z tym problemem, a później dowiedziałem się, że to dlatego, że nie umieściłem spacji między
and
a(
. To był błądPotem zmieniłem to na to, żeby to poprawić
źródło
W zależności od tego używam kilku metod. W tym samym arkuszu stylów, którego używam: @media (max-width: 450px), lub osobno upewnij się, że link ma prawidłowy nagłówek. Spojrzałem na twój fixmeup i masz mylącą tablicę linków do css. Działa tak, jak mówisz, również w HTC Desire S.
źródło
źródło
Dla mnie wskazałem
max-height
zamiastmax-width
.Jeśli to ty, zmień to!
źródło
Może się to również zdarzyć, jeśli poziom powiększenia przeglądarki jest nieprawidłowy. Powiększenie okna przeglądarki powinno wynosić 100%. W Chrome użyj,
Ctrl + 0
aby zresetować poziom powiększenia.źródło