Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Problem z media queries
smolcio
post
Post #1





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 7.02.2015

Ostrzeżenie: (0%)
-----


Witam, napisałem prosty kod do media queries lecz jest mały problem. Zmieniając szerokość przeglądarki wszystko działa lecz gdy wrzucam plik na serwer to mój telefon w przeglądarce chrome dla androida widzi wersje z rozdzielczością powyzej 800px a ma rozdzielczość o szerokości 720px. Style dla mniejszej rozdzielczości są jakby ignorowane. Być może coś źle robię, proszę o pomoc.


  1. <!DOCTYPE html>
  2. <meta charset="UTF-8">
  3. <title>MEDIA</title>
  4.  
  5. <link rel="stylesheet" type="text/css" href="style.css">
  6. </head>
  7.  
  8. <div>
  9.  
  10. <p>WITAM</p>
  11. </div>
  12.  
  13.  
  14. </body>
  15. </html>


  1. * {font-family: calibri;}
  2.  
  3.  
  4. @media screen and (max-width: 800px) {
  5.  
  6. div {
  7. width: 50%;
  8. background: #af6969;
  9. margin: auto;
  10. }
  11. p {
  12. text-align: center;
  13. font-size: 30px;
  14. color: #fff;
  15.  
  16. }
  17.  
  18. }
  19.  
  20. @media screen and (min-width: 801px) {
  21.  
  22. div {
  23. width: 50%;
  24. background: #696eaf;
  25. margin: auto;
  26. }
  27.  
  28. p {
  29. text-align: center;
  30. font-size: 30px;
  31. color: #fff;
  32. }
  33.  
  34. }


Ten post edytował smolcio 7.02.2015, 20:08:09
Go to the top of the page
+Quote Post
trueblue
post
Post #2





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


1. style.css jest w tym samym katalogu co index?
2. Plik css ma w nazwie jakieś wielkie litery?


--------------------
Go to the top of the page
+Quote Post
smolcio
post
Post #3





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 7.02.2015

Ostrzeżenie: (0%)
-----


Tak wszystko jest w tym samym folderze oraz jest pisane z małej litery
Go to the top of the page
+Quote Post
trueblue
post
Post #4





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Odwiedź zakładkę Network lub Console w przeglądarce Chrome (F12).


--------------------
Go to the top of the page
+Quote Post
smolcio
post
Post #5





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 7.02.2015

Ostrzeżenie: (0%)
-----


Sęk w tym, że w systemie Windows w obrębie przeglądarki Chrome wszystko działa, lecz nie działa gdy stronę odwiedzam na telefonie, wyświetlana jest wersja powyżej 800px.
Go to the top of the page
+Quote Post
trueblue
post
Post #6





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


A czy Twój telefon obsługuje media queries?
Jeśli tak, to nie ma znaczenia czy stronę masz na lokalnym serwerze czy na docelowym, bo media queries są obsługiwane po stronie klienta (przeglądarki).


--------------------
Go to the top of the page
+Quote Post
smolcio
post
Post #7





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 7.02.2015

Ostrzeżenie: (0%)
-----


Telefon wraz z przeglądarką chrome musi je obsługiwać ponieważ raz, że jest nowoczesny a dwa to inne strony które korzystają z media queries działają. Myślałem o tym, że to problem w kodzie.
Go to the top of the page
+Quote Post
trueblue
post
Post #8





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Jeśli problem jest w kodzie, to nie działałoby to na lokalnym serwerze.
Jesteś pewien, że ma rozdzielczość 720px? Nie sądzę. Rozdzielczość ekranu, to co innego niż rozdzielczość css. Jeśli pixel ratio jest większe niż jeden, to na pewno Twój kod nie zadziała.
http://stackoverflow.com/a/8785677


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 21.08.2025 - 06:41