| Autor | Zpráva | ||
|---|---|---|---|
| han5vk Profil |
#1 · Zasláno: 2. 9. 2013, 15:41:30
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 |
#2 · Zasláno: 2. 9. 2013, 16:25:38
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 |
#3 · Zasláno: 2. 9. 2013, 16:31:27
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 |
#4 · Zasláno: 2. 9. 2013, 17:06:27
Chamurappi:
Takze pre styl na obrazovky mensie ako 770px len zadam do linku na styl nieco taketo: media="only screen and (max-width: 770px)" ? Nemohol som to pouzit pretoze som nevedel o tom, ze to existuje :) Je to podporovane dobre v mobilnych prehliadacoch? |
||
| Chamurappi Profil |
#5 · Zasláno: 2. 9. 2013, 17:13:26
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 |
#7 · Zasláno: 4. 9. 2013, 23:38:01
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?
|
||
|
Časová prodleva: 11 let
|
|||
0