IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Josef Kuchař - Pepa489
Tvůrce
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
Tomáš Maňhal
Člen
Avatar
Odpovídá na Josef Kuchař - Pepa489
Tomáš Maňhal: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í

*@media 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
23.11.2014 19:34
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Josef Kuchař - Pepa489
Neaktivní uživatel: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
23.11.2014 19:35
Neaktivní uživatelský účet
Avatar
Josef Kuchař - Pepa489
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
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
Josef Kuchař - Pepa489
Tvůrce
Avatar
Odpovídá na Tomáš Maňhal
Josef Kuchař - Pepa489:23.11.2014 19:46

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

Nahoru Odpovědět
23.11.2014 19:46
2x piš, jednou debuguj
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš Maňhal: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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Tomáš Maňhal
Neaktivní uživatel: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
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel: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
Neaktivní uživatelský účet
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Jan Lupčík:23.11.2014 20:08

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

Nahoru Odpovědět
23.11.2014 20:08
TruckersMP vývojář
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel: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
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Jan Lupčík
Neaktivní uživatel:23.11.2014 20:12

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

Nahoru Odpovědět
23.11.2014 20:12
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Neaktivní uživatel: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
Neaktivní uživatelský účet
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš Maňhal: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
Avatar
Josef Kuchař - Pepa489
Tvůrce
Avatar
Odpovídá na Tomáš Maňhal
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
Soni
Člen
Avatar
Soni: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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Tomáš Maňhal
Neaktivní uživatel: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
Neaktivní uživatelský účet
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.