Diskuze: Přiblížení

HTML a CSS HTML a CSS Přiblížení American English version English version

Avatar
Josef Kuchař (Pepa489):

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:

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  +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 :

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; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Odpovídá na Samuel Illo
Josef Kuchař (Pepa489):

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):

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:

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 :

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; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Samuel Illo
Jiří Gracík:

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:

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

Nahoru Odpovědět 23.11.2014 20:08
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Jiří Gracík
Samuel Illo :

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; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na IT Man
Jiří Gracík:

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:

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:

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):

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:

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 :

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

Nahoru Odpovědět 24.11.2014 7:17
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
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.