Media qurey na urządzeniach mobilncyh

Question

Witam,

mam problem nie działa mi media qurey na urzadzeniach mobilnych. W przeglądarce wysztko funkcjonuje poprawnie to znaczy, jak mniejszam szerokość to odpowiednio modyfikują się style. Na telefonie już nei wczytuje wesji którą powinien. Telefon Sony Xperia M2 540 x 960 px. Czyli w nromalnym trybie - pionowo powinno działać. Czytałem o pixel ratio ale i tak mi to nie pomogło.

kod:

<link rel="stylesheet" href="style.css" type="text/css" media="all and (min-width: 1024px) " />
        <link rel="stylesheet" href="style2.css" type="text/css" media="all and (max-width: 1023px) " />
        <link rel="stylesheet" href="styletablet.css" type="text/css" media="all and (max-width: 734px) " />
        <link rel="stylesheet" href="stylesmartphone.css" type="text/css" media="screen and (max-width: 599px) and (-webkit-min-device-pixel-ratio: 1.5) " />
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Jakieś sugestie dlaczego w przeglądarce działa a na urządzeniach mobilnych nie?

 

[event15] upiększenie kodu - znacznik code

Answer 1

Wklej do sekcji head tą linijkę:

<meta name="viewport" content="width=device-width">

 

Answer 2

Co konkretnie nie działa?

Tak swoją drogą, dużo łatwiej jest używać reguł "media queries" po prostu w pliku CSS, tworzenie kilku arkuszy stylów się nie opłaca.

Comments

Zgadzam się, często media queries to tylko parę linijek kodu.

---

taka była moja pierwsza próba, ale jakoś nie mogę tego uruchomić teoretycznie:

@media all and (max-width: 600px)
{
 body{background-color:red;}
  }

powinno zmienić kolor tła na czerwony przy rozdzielczości mneijszej niż 600px.

---

Spróbuj:

@media screen and (max-width: 600px) {
    body {
        background-color: red;
    }
}

 

---

niestety bez rezultatu

---

To bardzo dziwne.

---

Ty serio widzisz jakąś różnicę między zapisem mikhar, a twoim?

---

Pewnie przyczyna bedzie banalna jak zawsze ale nie mam już pomysłu dlaczego nie działa.

Answer 3

meta[name=viewport] masz?