Forum PHP.pl > Problem z media queries

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

smolcio

7.02.2015, 18:33:25

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.

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MEDIA</title>
 
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
    <div>
 
        <p>WITAM</p>
    </div>
 
 
</body>
</html>
[HTML] pobierz, plaintext

[PHP] pobierz, plaintext 
* {font-family: calibri;}
 
 
@media screen and (max-width: 800px) {
 
    div {
        width: 50%;
        background: #af6969;
        margin: auto;
    }
    p {
        text-align: center;
        font-size: 30px;
        color: #fff;
 
        }
 
}
 
@media screen and (min-width: 801px) {
 
    div {
        width: 50%;
        background: #696eaf;
        margin: auto;
    }
 
    p {
        text-align: center;
        font-size: 30px;
        color: #fff;
        }
 
}
[PHP] pobierz, plaintext

trueblue

7.02.2015, 19:03:36

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

smolcio

7.02.2015, 20:06:50

Tak wszystko jest w tym samym folderze oraz jest pisane z małej litery

trueblue

7.02.2015, 22:08:34

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

smolcio

8.02.2015, 21:29:28

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.

trueblue

8.02.2015, 22:07:38

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).

smolcio

8.02.2015, 22:23:18

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.

trueblue

8.02.2015, 22:32:50

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

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.