Avatar
Josef Kuchař (Pepa489):23.11.2014 19:08

Ahoj, teď dělám na webu s responzivním designem a chci aby byl optimalizovaný i pro mobily, ale když si web spustím na mobilu, tak je jakoby oddálený(chová se jako neresponzivní), prosím o pomoc
Odkaz na web: http://www.komenskehozsnachod.tode.cz/
Pepa489

Odpovědět 23.11.2014 19:08
2x piš, jednou debuguj
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na Josef Kuchař (Pepa489)
tomasmanhal:23.11.2014 19:34

Ono to ve skutečnosti responzivní je a není :-) Jen musíš pomocí stránek říct mobilu, že jde o responzivní web.

To lze dvěma způsoby:

  1. Uděláš mobilní verzi zvlášť na subdoméně (dnes už se to moc nedělá a je to zbytečná práce navíc, výhodou je snazší zajištění podpory pro starší prohlížeče)
  2. Uděláš jen styly určené pro mobilní verzi

Třeba takto:

<meta name="viewport" content="width=device-width, initial-scale=1">

a hraješ si pak s @media queries, kde např. nakóduješ styly přímo pro určité rozlišení

[email protected] screen and (max-width: 480px) {
  /* pravidla se aplikují jen při šířce do 480 px */
}*

Měj na paměti, že media queries nepodporuje Explorer před verzí 9, tam se to pak ošetřuje pomocí JS :-)

:-)
Editováno 23.11.2014 19:35
Akceptované řešení
+20 Zkušeností
Řešení problému
Nahoru Odpovědět  +2 23.11.2014 19:34
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Josef Kuchař (Pepa489)
Samuel Illo :23.11.2014 19:35

Ja používam na responzívnych weboch na veľkosť písma namiesto px em. Zobrazuje sa to lepšie. Na PC je 1em 16px. Potom používaj namiesto pevnej šírky max-width, max-height a nakoniec media queries.

// Pozri sa na môj web. Mám ho vyriešený úpne bez media queries, len za pomoci relatívnej šírky...

Editováno 23.11.2014 19:37
Nahoru Odpovědět  -1 23.11.2014 19:35
www.samuelillo.com | www.github.com/lamka02sk
Avatar
Odpovídá na Samuel Illo
Josef Kuchař (Pepa489):23.11.2014 19:44

Ten tvůj web se mi na mobilu zobrazuje nějak divně :D

Nahoru Odpovědět 23.11.2014 19:44
2x piš, jednou debuguj
Avatar
Odpovídá na tomasmanhal
Josef Kuchař (Pepa489):23.11.2014 19:46

Díky ten viewport meta tag mi dost pomohl :)

Nahoru Odpovědět  +1 23.11.2014 19:46
2x piš, jednou debuguj
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na Samuel Illo
tomasmanhal:23.11.2014 19:46

Mě se ta tvoje stránka ani nenačte na mobilu (Wifi na Xiaomi Redmi Note LTE a Chrome) :-O

Nahoru Odpovědět 23.11.2014 19:46
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na tomasmanhal
Samuel Illo :23.11.2014 19:55

No tak to je zaujímavé :D Čo sa ti zobrazí?
a
Josef Kuchař (Pepa489) až keď klikneš na Blog sa zobrazuje dobre, tá úvodná stránka je momentálne trochu rozhodená, lebo tam pripravujem zmeny :)

Nahoru Odpovědět 23.11.2014 19:55
www.samuelillo.com | www.github.com/lamka02sk
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Samuel Illo
Jiří Gracík:23.11.2014 20:04

Nemyslím si, že tvůj web je zrovna ideální ukázka responzivnosti, vzhledem k tomu že to je převážně pouze text.

// bez sloupců, sidebarů, obrázků, ...

Editováno 23.11.2014 20:05
Nahoru Odpovědět 23.11.2014 20:04
Creating websites is awesome till you see the result in another browser ...
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Jiří Gracík
IT Man:23.11.2014 20:08

Souhlasím, dobrý příklad responzivnosti je tato síť - ITnetwork. :)

Nahoru Odpovědět 23.11.2014 20:08
Usmívej se, zítra už tvůj kód nemusí fungovat!
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Jiří Gracík
Samuel Illo :23.11.2014 20:09

Obrázky sú tam asi dva, takže bez obrázkov nie je (po kliknutí na článok) :) Síce máš pravdu, že tam nie sú stĺpce a sidebary, ale ani on ich tam nemá, tak si myslím, že to nie je najhorší príklad pre neho a hlavne jeho web, ktorý tvorí.

Editováno 23.11.2014 20:10
Nahoru Odpovědět 23.11.2014 20:09
www.samuelillo.com | www.github.com/lamka02sk
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na IT Man
Jiří Gracík:23.11.2014 20:12

No, dejme tomu, že je to lepší příklad :)

Nahoru Odpovědět  +1 23.11.2014 20:12
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Samuel Illo
Jiří Gracík:23.11.2014 20:25

Jo takhle, takže dva obrázky na webu s dvaceti stránkama mění celou situaci. Tak to pak ano :)

Nahoru Odpovědět 23.11.2014 20:25
Creating websites is awesome till you see the result in another browser ...
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na Samuel Illo
tomasmanhal:23.11.2014 21:10

Nechci tady jet nějakej offtopic, ale nedokreslí se mi pozadí na celou stránku, skončí asi tak ve čtvrtině odzhora a tudíž není vidět menu a polovina loga, nebo hlavičky, či co to je :-) až když přiblížím gestem, tak se něco ukáže a i to něco se při zvětšování překrývá. Takže hlavní problém je v pozadí podle mě.

Nahoru Odpovědět 23.11.2014 21:10
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Odpovídá na tomasmanhal
Josef Kuchař (Pepa489):23.11.2014 21:12

Taky mám to samé, musel jsem otočit mobil, abych mohl kliknout na poloviční odkaz na blog :D

Nahoru Odpovědět 23.11.2014 21:12
2x piš, jednou debuguj
Avatar
S0n1
Člen
Avatar
S0n1:23.11.2014 23:06

Taktiež pri práci s responzívnym dizajnom odporúčam nástroje pre Chrome a Firefox napr. Firesizer pre prispôsobovanie. Šikovný doplnok aby si videl presne ako tvoj web vyzerá pri rozdielných rozlišeniach...

 
Nahoru Odpovědět 23.11.2014 23:06
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na tomasmanhal
Samuel Illo :24.11.2014 7:17

Na to sa pozriem, lebo mne sa ti zobrazuje správne.

Nahoru Odpovědět 24.11.2014 7:17
www.samuelillo.com | www.github.com/lamka02sk
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 16 zpráv z 16.