NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Media Queries a různá 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
Rosemary
Člen
Avatar
Rosemary:16.10.2014 16:31

Čauky :) mám na webovkách v CSS použité nějáké media queries, konkrétně
@media only screen and (max-width: 767px)
@media only screen and (min-width:767px) and (max-width: 960px)
@media only screen and (min-width:960px)
přičemž by se mělo teda jednat o 3 pozměněné vzhledy (upravená šířka stránky a u toho posledního přidáno nahoru záhlaví.
Teprv to zkouším. A chci se zeptat..

Když to otevřu v Mozille a nebo Chromu, tak při zmenšování okna se mi normálně mění vlastnosti stránky podle nastavení v queries, ale když v Chromu zapnu F12 a ten emulátor různých zařízení, vypadá to úplně stejně (všude je záhlaví a vůbec to nebere v potaz ta nastavení co tam mám)

I když si to otevřu u sebe na tabletu co má šířku tak 600px tak se to zobrazuje i s záhlavím a ne tak, jak je to u
@media only screen and (max-width: 767px)

Neví někdo, co s tím? Snad nebudu za blbečka :D Chci prostě různá zobrazení na různých rozlišeních :)

 
Odpovědět
16.10.2014 16:31
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Rosemary
Honza Bittner:16.10.2014 16:36

Tak ten emulátor nemusí fungovat korektně žejo... Vždy je lepší to zkusit na živo - tedy na nějakém tabletu, mobilu...

Nahoru Odpovědět
16.10.2014 16:36
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 Rosemary
Vojtěch Mašek (Woyta):16.10.2014 16:41

Přidej si do hlavičky toto:

<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
Nahoru Odpovědět
16.10.2014 16:41
Výraz "to nejde" není v mém slovníku
Avatar
Rosemary
Člen
Avatar
Odpovídá na Honza Bittner
Rosemary:16.10.2014 16:42

No, ono i když mám jen ten průzkumník a koukám na stránky, u kterých to funguje tak je tam napsáno že používá třeba styl.css a za tím je @media only atp..
u mě je jen ten styl a ty queries tam nejsou. Něco tam mám určitě špatně, ale ještě nikdy jsem s tím nepracovala :D takže to budu muset asik všechno ozkoušet.

 
Nahoru Odpovědět
16.10.2014 16:42
Avatar
Rosemary
Člen
Avatar
Odpovídá na Vojtěch Mašek (Woyta)
Rosemary:16.10.2014 16:48

přidáno, ale nezměnilo se to :(

 
Nahoru Odpovědět
16.10.2014 16:48
Avatar
Vojtěch Mašek (Woyta)
Tvůrce
Avatar
Odpovídá na Rosemary
Vojtěch Mašek (Woyta):16.10.2014 16:54

Zkus ještě upravit ty rozsahy tak, aby se nepřekrývaly, tzn:

@media only screen and (max-width: 767px)
@media only screen and (min-width:768px) and (max-width: 960px)
@media only screen and (min-width:961px)
Editováno 16.10.2014 16:54
Nahoru Odpovědět
16.10.2014 16:54
Výraz "to nejde" není v mém slovníku
Avatar
Rosemary
Člen
Avatar
Odpovídá na Vojtěch Mašek (Woyta)
Rosemary:16.10.2014 17:16

teď to funguje už v tom průzkumníku, ale když to otevřu v tabletu, mám tam pořád ten normální vzhled co je i na počítač :) Přitom když otevřu třeba stránky
http://www.timebreak.cz/ přes ten tablet, mám normální tabletovou verzi, kterou tam oni maj jako
@media only screen and (max-width: 767px)

Asi to zkusím úplně od znova a uvidím, jestli to tam třeba nedělá nějáká blbost :)

 
Nahoru Odpovědět
16.10.2014 17:16
Avatar
Vojtěch Mašek (Woyta)
Tvůrce
Avatar
Odpovídá na Rosemary
Vojtěch Mašek (Woyta):16.10.2014 17:22

Mě se osvědčilo zadávat pouze horní limit a přidávat pravidla od největšího k nejmenšímu, pak od sebe můžou dědit a je to míň kódu.

Nahoru Odpovědět
16.10.2014 17:22
Výraz "to nejde" není v mém slovníku
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Rosemary
Neaktivní uživatel:16.10.2014 17:29

Tablet nepatří pod screen, tam jsou pouze počítače. Tablety a telefony jsou handheld :)

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
16.10.2014 17:29
Neaktivní uživatelský účet
Avatar
Rosemary
Člen
Avatar
Odpovídá na Vojtěch Mašek (Woyta)
Rosemary:17.10.2014 11:19

pozměnila jsem to na
<meta name="viewport" content="width=de­vice-width, initial-scale=1.0">
už to jde :) díky všem

 
Nahoru Odpovědět
17.10.2014 11:19
Avatar
Rosemary
Člen
Avatar
Odpovídá na Vojtěch Mašek (Woyta)
Rosemary:17.10.2014 20:35

To - je odemě a má to být +! Promiň, překlikla jsem se :)
a řešení je taky špatně zaškrnuto, moc to taj s tím neumím. Takže se omlouvám :D
Ale už je to tu uzavřeno, řešení jsem našla :)

 
Nahoru Odpovědět
17.10.2014 20:35
Avatar
Michal Dvořáček
Člen
Avatar
Odpovídá na Neaktivní uživatel
Michal Dvořáček:3.10.2017 16:57

Asi hloupý dotaz, jen v návodu pro @media je uvedený, že screen je pro tablety. Není tam datum, tak nevim jestli jsou někde nesrovnalosti nebo jestli je to tak aktuální, že tahle diskuse z roku 2014 již není platná :D

 
Nahoru Odpovědět
3.10.2017 16:57
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Michal Dvořáček
Neaktivní uživatel:3.10.2017 19:15

MDN trvdí, že je většina typů již depricated a používá se jich jen pár. V podstatě je vhodné je používat pro tisk a čtečky, jinak media types nemají valný význam.
https://developer.mozilla.org/…b/CSS/@media

Nahoru Odpovědět
3.10.2017 19:15
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 13 zpráv z 13.