GoldenLine
Zaloguj się
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: szerokosc okna wedlug js i media queries

Czesc, mam niejaki problem z layoutem. Pytanie z pogranicza css i js, wiec postanowilam zadac je tutaj.

Mam media queries, dla 3 zakresow szerokosci ekranu:
ponizej 481 px
miedzy 481px i 980px
powyzej 980px



<link type="text/css" href="screen.css" rel="stylesheet" media="all and (min-width: 981px)" />

<link type="text/css" href="tablet.css" rel="stylesheet" media="all and (min-width: 481px) and (max-width: 980px)" />

<link type="text/css" href="mobile.css" rel="stylesheet" media="all and (max-width: 480px)" />


Na przegladarce na komputerze, gdy reskaluje okno dziala. CSS a z nimi uklad strony zmieniaja sie poprawnie.

Ale na przegladarce w HTC JS zwraca mi szerokosc okna 320 px a media queries laduja css dla szerokosci miedzy 481 a 980... ki diabel?
Link do wypowiedziLink
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: szerokosc okna wedlug js i media queries

WP7 na lumii (480x800) robi tak samo, pokazuje 320. Jest rozbieżność pomiędzy rzeczywistą rozdzielczością ekranu a tym co zwraca przeglądarka.
Jeśli można coś zasugerować:
1. Ogólnie musisz bardziej zgłębić temat ("media queries viewport sizes") i dużo testować.
2. Gdy robisz mobile, zapomnij o pikselach, % i 'em' dają lepsze rezultaty.
Link do wypowiedziLink

konto usunięte

Temat: szerokosc okna wedlug js i media queries

A jakby odpowiednio dodać orientation:landscape i orientation:portrait?
Link do wypowiedziLink
Jakub C.

Jakub C. frontend developer

Temat: szerokosc okna wedlug js i media queries

U mnie dość dużo takich dziwnych problemów z responsywnością znikło po dodaniu do head'a:

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

Spróbuj :)
Link do wypowiedziLink

konto usunięte

Temat: szerokosc okna wedlug js i media queries

Jakub C.:
U mnie dość dużo takich dziwnych problemów z responsywnością znikło po dodaniu do head'a:

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

Spróbuj :)
W sumie to najlepiej jakby dodać:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: szerokosc okna wedlug js i media queries

Jestescie nieocenieni :D Oczywiscie zabraklo linii:
<meta name="viewport" content="width=device-width, initial-scale=1.0">


Dzieki wielkie :))
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

7 obrazkow obok siebie, na ...




Wyślij zaproszenie do
Anuluj