NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Styl pro mobilní zařízení.

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Q.
Člen
Avatar
Q.:26.3.2014 18:58

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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Q.
Neaktivní uživatel:26.3.2014 19:04

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

Nahoru Odpovědět
26.3.2014 19:04
Neaktivní uživatelský účet
Avatar
Rudolf Macek (riot)
Člen
Avatar
Rudolf Macek (riot):26.3.2014 19:04

Č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
26.3.2014 19:04
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Rudolf Macek (riot)
Neaktivní uživatel:26.3.2014 19:05

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
Neaktivní uživatelský účet
Avatar
Zdeněk Pavlátka
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Zdeněk Pavlátka:26.3.2014 19:06

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

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

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
26.3.2014 19:12
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Zdeněk Pavlátka
Neaktivní uživatel:26.3.2014 19:14

Můžu něco zkusit vymyslet :)

Nahoru Odpovědět
26.3.2014 19:14
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:26.3.2014 19:55

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

Nahoru Odpovědět
26.3.2014 19:55
Neaktivní uživatelský účet
Avatar
Q.
Člen
Avatar
Odpovídá na Neaktivní uživatel
Q.:26.3.2014 21:02

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

 
Nahoru Odpovědět
26.3.2014 21:02
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:26.3.2014 21:36

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
26.3.2014 21:36
Neaktivní uživatelský účet
Avatar
Q.
Člen
Avatar
Odpovídá na Neaktivní uživatel
Q.:26.3.2014 22:37

Super, děkuju moc.

 
Nahoru Odpovědět
26.3.2014 22:37
Avatar
1Pupik1989
Člen
Avatar
1Pupik1989:27.3.2014 0:22

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:27.3.2014 1:27

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
27.3.2014 1:27
Code never lies, comments sometimes do. - Alan Cooper
Avatar
Vojtěch Mašek (Woyta)
Tvůrce
Avatar
Odpovídá na Q.
Vojtěch Mašek (Woyta):27.3.2014 15:02

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
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.:28.3.2014 20:57

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
Tvůrce
Avatar
Honza Bittner:28.3.2014 21:09

Opravdu pro mobily v px ne.

Nahoru Odpovědět
28.3.2014 21:09
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Q.
Neaktivní uživatel:28.3.2014 21:10

Č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
Neaktivní uživatelský účet
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:28.3.2014 21:19

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Vojtěch Mašek (Woyta)
Tvůrce
Avatar
Odpovídá na Q.
Vojtěch Mašek (Woyta):28.3.2014 21:19

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
28.3.2014 21:19
Výraz "to nejde" není v mém slovníku
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Honza Bittner
Neaktivní uživatel:28.3.2014 21:27

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
Neaktivní uživatelský účet
Avatar
Vojtěch Mašek (Woyta)
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Vojtěch Mašek (Woyta):28.3.2014 21:36

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
28.3.2014 21:36
Výraz "to nejde" není v mém slovníku
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Vojtěch Mašek (Woyta)
Neaktivní uživatel:28.3.2014 21:39

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
Neaktivní uživatelský účet
Avatar
Vojtěch Mašek (Woyta)
Tvůrce
Avatar
Odpovídá na Neaktivní uživatel
Vojtěch Mašek (Woyta):28.3.2014 21:44

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
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Vojtěch Mašek (Woyta)
Neaktivní uživatel:28.3.2014 21:46

Aha ;)

Nahoru Odpovědět
28.3.2014 21:46
Neaktivní uživatelský účet
Avatar
Q.
Člen
Avatar
Q.:29.3.2014 10:56

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
Vojtěch Mašek (Woyta)
Tvůrce
Avatar
Odpovídá na Q.
Vojtěch Mašek (Woyta):29.3.2014 12:05

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.:29.3.2014 12:14

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

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

Co je prosím na tomto špatně?

 
Nahoru Odpovědět
29.3.2014 18:06
Avatar
Marián Ligocký
Tvůrce
Avatar
Odpovídá na Q.
Marián Ligocký:4.4.2014 9:51

.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.