Autor Zpráva
han5vk
Profil
Zdravim, zacal som si upravovat web na nieco ako responsive design a snazim sa js zistit sirku okna a ak je menej ako 770px podstrcit ine CSS. Pre debug vypisujem hodnoty pomocou document.write().Problem ale je, ze na androide ICS s Chrome mi aj innerWidth aj outerWidth vracia nejake blbe hodnoty. InnerWidth vravi nezavisle na orientacii prehliadaca nejakych 946px a innerWidth 509px alebo tak nejak. Fakt netusim odkial sa tieto hodnoty beru.. Mobil ma tusim 480x854px, urcite nie to, co mi ten js vypisuje..Dakujem za pomoc.
xROAL
Profil
Skús si do hlavičky vložiť toto:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="HandheldFriendly" content="true" />

Ja som si robil podobný script, ktorý bez tohoto tiež ukazoval rôzne "podivné" hodnoty. Teraz to už vyzerá reálnejšie.
Chamurappi
Profil
Reaguji na xROALa:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
Jak mu pomůže tohle?


Reaguji na han5vka:
snazim sa js zistit sirku okna a ak je menej ako 770px podstrcit ine CSS
Proč nemůžeš použít @media queries?
han5vk
Profil
Chamurappi:
Takze pre styl na obrazovky mensie ako 770px len zadam do linku na styl nieco taketo:
media="only screen and (max-width: 770px)"
(nasiel ujo google)
?
Nemohol som to pouzit pretoze som nevedel o tom, ze to existuje :) Je to podporovane dobre v mobilnych prehliadacoch?
Chamurappi
Profil
Reaguji na han5vka:
To only bych tam možná nepsal, i když je to asi jedno.

mensie ako 770px
Menší nebo rovno.

Je to podporovane dobre v mobilnych prehliadacoch?
Ano. V desktopových hůř. Starší prohlížeče mohou ten stylopis ignorovat nehledě na to, jestli splní podmínku.
han5vk
Profil
Keďže mi to takto nefungovalo /nezmenili sa štýly ani na desktopoch ani na mobile/:
<link rel="stylesheet" type="text/css" href="<?php echo URI;?>kniznice/style.css">
<link rel="stylesheet" type="text/css" href="<?php echo URI;?>kniznice/mobil-style.css" media="screen and (max-width: 770px)">

Nastavil som podmienku aj pre klasický štýl, takto:
<link rel="stylesheet" type="text/css" href="<?php echo URI;?>kniznice/style.css" media="screen and (min-width: 771px)">
<link rel="stylesheet" type="text/css" href="<?php echo URI;?>kniznice/mobil-style.css" media="screen and (max-width: 770px)">

Toto funguje na desktopovej Opere, Mozzille a Chrome. Desktopový IE ignoruje oba štýly, takže stránka sa rozpadne a na mobile mi ostáva nastavený stále klasický štýl style.css a nie mobil-style.css

Čo som spravil zle?
Chamurappi
Profil
Reaguji na han5vka:
<meta name="viewport"> v kódu máš? Zrovna ten ti poradil xROAL dobře.

Desktopový IE ignoruje oba štýly
Verze 8 a starší a quirk devítky nepodporují podmínky v atributu media.
han5vk
Profil
Pridal som ten viewport. V desktopových prehliadačoch (chrome, opera, firefox) mi to od zadanej šírky prehadzuje, no zas na mobile je permanentne zapnutý mobilný režim, ajkeď šírka díspleja na landscape je cez 850px. Fakt nechápem prečo to tak robí, ajkeď je to možno dobre, pretože by sa človek mohol diviť, prečo tá istá stránka vyzerá inak keď mobil otočí... Čo sa týka IE verzie 8-, ktoré ignorujú obidva štýly , je dobré riešenie použiť podmienený komentár (IE 9+ ich už asi nepozná, či?) a v ňom určiť permanente klasický štýl, pre obrazovky šírky nad 770px?

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: