Avatar
Q.
Člen
Avatar
Q.:

Dobrý večer,

potřeboval bych napsat jednoduchou šablonu pro mobilní zařízení, aby si to "zjistilo rozměry displaye" a přizpůsobilo se to tomu.

Hledal jsem co a jak a buďto je to pro mě špatně vysvětlené(ne­rozumím tomu) nebo mi to nefunguje a nevím jak dál.

Proto bych vás chtěl poprosit, jestli neznáte nějáké tutoriály, které jsou fakt dobré nebo prostě rady, jak jste se to učili vy.

Mockrát dík.

 
Odpovědět 26.3.2014 18:58
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Q.
Jiří Gracík:

Já vesměs vše pokročilé odkoukal od již hotových šablon a webů.

Nahoru Odpovědět 26.3.2014 19:04
Creating websites is awesome till you see the result in another browser ...
Avatar
Rudolf Macek (riot):

Čau, možná je to hloupost, ale já bych použil místo zapisování v px % a ono se to samo přizpůsobí, ale jinak mám pocit že jsem někde četl že z JS se to dá zjistit.

Editováno 26.3.2014 19:04
 
Nahoru Odpovědět  -2 26.3.2014 19:04
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Rudolf Macek (riot)
Jiří Gracík:

Ano, tak to je hloupost :) Někde to může pomoct, ale rozhodně to neudělá celou práci, tu udělá nejčastěji float a media queries.

Nahoru Odpovědět 26.3.2014 19:05
Creating websites is awesome till you see the result in another browser ...
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Jiří Gracík
Zdeněk Pavlátka:

Nechceš na to napsat článek? :)

Nahoru Odpovědět  +3 26.3.2014 19:06
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Ono je vlastně docela těžké udělat nějaký responzivní web dobře koukatelný i na mobilu, jelikož mobily o stejné velikosti mohou mít od 480 do 1920 px. Takže přizpůsobení podle pixelů můžete rovnou vyloučit.

Prakticky se ale musí upravit design či rozvržení stránky, nejlépe na jednosloupcové.

Mobilní prohlížeče si ale dokáží různě přizpůsobovat stránku tak, aby se vešly. Někdy to může být přínosem, někdy ne. Dá se to zakázat v meta tagu.

Editováno 26.3.2014 19:13
Nahoru Odpovědět  +1 26.3.2014 19:12
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jiří Gracík
Redaktor
Avatar
Nahoru Odpovědět  +2 26.3.2014 19:14
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

Někomu se mi tu podařilo smazat ten poslední komentář, omlouvám se :`

Nahoru Odpovědět  ±0 26.3.2014 19:55
Creating websites is awesome till you see the result in another browser ...
Avatar
Q.
Člen
Avatar
Odpovídá na Jiří Gracík
Q.:

Velice bych uvítal, kdyby si něco napsal. :)

 
Nahoru Odpovědět  +1 26.3.2014 21:02
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

Dobrá dobrá, tak já nejdřív popřemýšlím, jak vždycky začínám a jak to vůbec popsat a shrnout. pak to tedy zkusím i sepsat :D

Nahoru Odpovědět  +1 26.3.2014 21:36
Creating websites is awesome till you see the result in another browser ...
Avatar
Q.
Člen
Avatar
 
Nahoru Odpovědět 26.3.2014 22:37
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:

Naposledy co jsem blbnul s responsivním designem, tak jsem zjistil, že lepší je kontrolovat poměr stran, než šířku.

 
Nahoru Odpovědět 27.3.2014 0:22
Avatar
psafarcik
Člen
Avatar
Odpovídá na Q.
psafarcik:

Ahoj, určitě Ti doporučuji se podívat na responsivní CSS framework Twitter Bootstrap (http://getbootstrap.com/), než se ovšem začneš pouštět do responsivního designu, tak bys měl něco vědět o CSS GRID systémech, asi nejznámější je GRID 960GS (http://960.gs/). Taky ti určitě bodne znalost JS a HTML5 & CSS3. PS: Podobných CSS frameworků dnes najdeš spoustu, ale Bootstrap je nejvíce rozšířený a troufnu si říct, že je i nejlepší, na internetu nalezneš o něm hromadu informací a tutoriálů, bohužel musíš počítat s tím, že naprostá většina je v anglickém jazyce.

Editováno 27.3.2014 1:30
Nahoru Odpovědět  -1 27.3.2014 1:27
Code never lies, comments sometimes do. - Alan Cooper
Avatar
Odpovídá na Q.
Vojtěch Mašek (Woyta):

Klíčem k zobrazení na mobilech a tabletech je tenhle meta tag

<meta name="viewport" content="width=device-width, user-scalable=no">

zařízení s velkým DPI pak budou zobrazovat obsah jako kdyby bylo rozlišení nižší (například iPad s retina displejem se bude chovat jako obyčejný 1024x768, podobně to bude i u mobilů) a tím pádem nepotřebuješ měnit velikost písma atd., nebo zadávat velikosti v procentech.
Pak už potřebuješ jenom media queries pro úpravu layoutu stránky, šablonu pro různá zařízení najdeš tady

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Nahoru Odpovědět  ±0 27.3.2014 15:02
Výraz "to nejde" není v mém slovníku
Avatar
Q.
Člen
Avatar
Odpovídá na Vojtěch Mašek (Woyta)
Q.:

Ahoj,

díky za odpověď, takže jestli to dobře chápu....
kdyz budu chtít rozlišení pro 720-1024 (priklad)
tak si zadefinuju

.trida{width:100%}

A budu mít 320-480

.trida{width:50%}
 
Nahoru Odpovědět 28.3.2014 20:57
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Opravdu pro mobily v px ne.

Nahoru Odpovědět 28.3.2014 21:09
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Q.
Samuel Illo :

Čo tak použiť responzivny design?

@media screen and (min-width:960px)

Na nete je o tom dosť článkov a dobrých aj po Slovensky alebo po Česky.

Nahoru Odpovědět 28.3.2014 21:10
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Samuel Illo
Honza Bittner:

Jak jsem psal, toto pro mobily není moc účinné když tu jsou mobily s FullHD rozlišením, které tvůj kód bude detekovat jako PC a pak uživatel uvidí malinké vše. :)

Testoval jsem to a opravdu to je docela problém no.. :)

Lepší je spíš vybrat přes třeba @media handeld, avšak, také to nemůsí být 100%... Také bych určitě volil %.

Nahoru Odpovědět 28.3.2014 21:19
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Q.
Vojtěch Mašek (Woyta):

Záleží na konkrétním zařízení, možná jsem to nenapsal úplně přesně, ale základem je to, že si pak ono mobilní zařízení poradí se stránkou lépe.
Pro srovnání přikládám náhledy stránky bez tagu a s tagem, bez tagu po načtení různě přetéká na strany a velikosti jsou splašené s tagem je vše ve správných poměrech a tak velké aby to šlo přečíst a stisknout.

Nahoru Odpovědět  +1 28.3.2014 21:19
Výraz "to nejde" není v mém slovníku
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Honza Bittner
Samuel Illo :

Zase to nebude až také hrozné ako keby to tam nebolo. FullHD na mobile máš od nejakých 5" a viac to máš šírku displeja asi 6,5cm a bude to tam vyzerať vcelku dobre. A ďalšie: po šírke displeja je len 1080p a nie 1920 ako na monitore.

A stránka sa dá mierne aj priblížiť.
Mimochodom vynikajúco optimalizovaných webov je nič moc takže ten jeden sa stratí. ..

Editováno 28.3.2014 21:29
Nahoru Odpovědět 28.3.2014 21:27
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Odpovídá na Samuel Illo
Vojtěch Mašek (Woyta):

Anebo naopak vynikne, pokud bude udělaný opravdu dobře.
Ty obrázky co jsem sem postnul, jsou screenshoty z mého portfolia které zrovna dělám a na všech testovaných zařízeních (PC FullHD, mobil HD, mobil 800x450, iPad retina) fungoval naprosto podle očekávání a media_queries fungují také v určitém poměru, ne v absolutních rozměrech displeje v pixelech.

Editováno 28.3.2014 21:37
Nahoru Odpovědět  +1 28.3.2014 21:36
Výraz "to nejde" není v mém slovníku
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Vojtěch Mašek (Woyta)
Samuel Illo :

Malý detail ku screenshotom :)
Nie každý má pri sebe 2 smartfóny aby si s druhým mohol naskenovat QR kód, či? :D

Nahoru Odpovědět 28.3.2014 21:39
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Odpovídá na Samuel Illo
Vojtěch Mašek (Woyta):

Psal jsem, že na tom zrovna dělám, není to ještě hotové, pro mobily se QR pochopitelně zobrazovat nebude, krom toho jsou tam další možnosti jak mě kontaktovat ;)

Nahoru Odpovědět 28.3.2014 21:44
Výraz "to nejde" není v mém slovníku
Avatar
Samuel Illo
Redaktor
Avatar
Nahoru Odpovědět 28.3.2014 21:46
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Q.
Člen
Avatar
Q.:

Velice bych uvítal, kdyby zde v nejbližší době byl nějáký tutorial. Bylo by to super. :)

 
Nahoru Odpovědět 29.3.2014 10:56
Avatar
Odpovídá na Q.
Vojtěch Mašek (Woyta):

Možná bych mohl zase něco semolit ;)

Nahoru Odpovědět 29.3.2014 12:05
Výraz "to nejde" není v mém slovníku
Avatar
Q.
Člen
Avatar
Odpovídá na Vojtěch Mašek (Woyta)
Q.:

Moc bych ti byl vděčný. :)

 
Nahoru Odpovědět 29.3.2014 12:14
Avatar
Q.
Člen
Avatar
Q.:

Co je prosím na tomto špatně?

 
Nahoru Odpovědět 29.3.2014 18:06
Avatar
Marián Ligocký
Redaktor
Avatar
Odpovídá na Q.
Marián Ligocký:

.hlava má background green však?

 
Nahoru Odpovědět 4.4.2014 9:51
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 29 zpráv z 29.