| Autor | Zpráva | ||
|---|---|---|---|
| radekt Profil |
Dobrý den,
dělal jsem redesign kamarádova webu (Římské legie). Přeje si mít fixní pozici menu, aby se, pokud se dokumentem roluje, drželo v okně na místě. Problém nastává v mobilním prohlížeči v módu landscape: spodní položky menu jsou nedostupné, protože jsou umístěny pod spodním okrajem stránky a díky pevnému umístění se k nim nelze dostat posouváním obsahu. Jediné řešení, které mě napadlo, bylo vypnout fixní pozici menu pro menší zařízení: HTML <!--vše, co má výšku viewportu 700px a méně, nemá fixní pozici menu --> <link rel="stylesheet" href="/css/small_height.css" media="screen and (max-height: 700px)"> CSS #nav {
position: static;
}Chci se zeptat na dvě věci. Existuje lepší řešení? Pokud ne, je zvolená max-height 700px optimální? Na mobilu se to chová dobře, ale nemám možnost to otestovat na nějakém tabletu. Děkuji Radek Tůma |
||
| Tomáš123 Profil |
radekt:
„Existuje lepší řešení?“ Myslím, že lepšie riešenie spočíva v tom, že namiesto celej navigácie, bude viditeľný iba pruh hore, z ktorého po nájdení myšou užívateľovi vyskočia položky menu. „je zvolená max-height 700px optimální?“ Ak sa budeš riadiť tým hore, tak je výška 700px úplne zbytočná, navrhoval by som niečo okolo 400px-300px, aby sa malo menu kam vysunúť a čo je dôležitejšie, aby malo ako zmiznúť. Príklad: Navigačný blok: výška 30px; (výška bloku, z ktorého sa bude menu vysúvať) subpoložky: výška 25px; (výška riadku položiek, ktoré sa vysunú) zvýši: výška 220px; A menu by som dal position: static; pri výške = alebo > 300px;
|
||
| radekt Profil |
Tomáš123:
Pruh nahoře, z kterého po kliknutí vyjedou položky menu, je častým řešením - ale řešení tohoto druhu, co jsem zatím viděl, se neobešla bez JavaScriptu a nevím, zda a jak by to šlo pouze pomocí CSS tak, aby to fungovalo na dotykových zařízeních. Abych to ještě upřesnil - stránky jsou stylované metodou mobile first - tedy, menu je nad obsahem a není fixní, pro šířku viewportu větší než 590px se menu přesune nalevo od obsahu a je fixní. Pro desktop a mobil držený na výšku to funguje, jak jsem chtěl. Ale jakmile se mobil otočí na šířku, je považován za desktop a tam nastával výše zmíněný problém. |
||
| Bubák Profil |
radekt:
„Ale jakmile se mobil otočí na šířku, je považován za desktop“ http://kod.djpw.cz/nidb http://kod.djpw.cz/nidb- Pro vyzkoušení stačí "hodit" prohlížeč (nebo list, ale to umí jen stará dobrá Opera) ho okna (zotavit) a měnit poměr stran okna změnou výšky nebo šířky. Kromě orientation:portrait, použitého v ukázce, existuje i min-device-width, max-device-width a taky min-device-height a max-device-height, na tvou stránku jsem se nedíval, tudíž neposoudím, co se ti bude více hodit, ale tipnul bych to na min-device-height nebo na kombinaci orientation:portrait a min-device-height.
|
||
| radekt Profil |
Bubák:
Děkuji moc, takže budu-li to mít takto: <!-- mobile --> <link rel="stylesheet" type="text/css" href="/css/mobile.css"> <!-- mobile landscape --> <link rel="stylesheet" href="/css/mobile.css" media="screen and (max-width: 590px) and (orientation: landscape)"> <!-- desktop --> <link rel="stylesheet" href="/css/desktop.css" media="screen and (min-width: 590px)"> Bude si mobil v landscape módu brát styl mobile.css a ne desktop.css a omezením max-width se vyhnu tomu, aby si styl mobile.css braly tablety v landscape módu, kde by menu nad obsahem, s šířkou na celou obrazovku, už nevypadalo dobře. Šlo by to tak udělat? Nebo by byla elegantnější tato konstrukce? <!-- mobile first plus zařízení do 590px v módu landscape --> <link rel="stylesheet" href="/css/mobile.css" media="all, ((max-width: 590px) and (orientation: landscape))"> <!-- desktop --> <link rel="stylesheet" href="/css/desktop.css" media="screen and (min-width: 590px)"> |
||
|
Časová prodleva: 4 dny
|
|||
| radekt Profil |
Nakonec jsem to vyřešil tak, že v režimu landscape se fixní pozice menu bez výjimky ruší. Je to asi nejčistší cesta, která zaručí, že se k menu půjde kdykoli dostat.
HTML: <!-- mobile first --> <link rel="stylesheet" type="text/css" href="/css/mobile.css"> <!-- vše, co má šířku viewportu větší než 590px, už je pro nás desktop --> <link rel="stylesheet" href="/css/desktop.css" media="screen and (min-width: 590px)"> <!-- mobilní zařízení v režimu landscape --> <link rel="stylesheet" href="/css/landscape.css" media="screen and (orientation: landscape)"> CSS: /* landscape.css */
#nav {
position: static;
} |
||
|
Časová prodleva: 10 let
|
|||
0