| Autor | Zpráva | ||
|---|---|---|---|
| žadatel Profil * |
#1 · Zasláno: 16. 7. 2015, 14:15:10
Ahoj,
z jpw pro overflow: auto - "nenechá se přetékat; je-li potřeba, zobrazí se rolovací lišta". Na PC se lišta skutečně zobrazí, ale na mobilu se mi lišta nezobrazí, takže uživatel může snadno přehlédnout, že text pokračuje níže a je nutné jej odrolovat. Jak to v případě mobilu vyřešit, aby uživatel na první pohled viděl, že text je rolovací? |
||
| Chamurappi Profil |
Reaguji na žadatele:
A) Nedělat text rolovací. Je to nepříjemné na používání většinou i na desktopu. B) Useknout text tak, aby bylo zřejmé, že je useknutý a že má možná pokračování. Při line-height i height v em to jde víceméně úspěšně zajistit.
C) Skriptem zjistit, zda je scrollHeight vyšší než offsetHeight a podle toho nastavit třídu, která nějak změní vzhled (ale těžko říct, čemu uživatel porozumí). Kdysi jsem našel i jakési řešení přes samotné CSS, které ale funguje jen v Exploreru.
Vzhledem k tomu, že část mobilních prohlížečů vůbec nepodporuje rolování čehokoliv jiného než je stránka (a overflow: auto berou jako overflow: hidden), bych upřednostnil možnost A.
Ukaž, o co se snažíš, třeba vymyslíme něco chytřejšího. |
||
| žadatel Profil * |
#3 · Zasláno: 16. 7. 2015, 15:44:44
Chamurappi:
Díky za tipy. Možnost C zavrhuju z fleku, k tomu nemám potřebné znalosti ;-) Možnost B mě napadla taky, ale přišlo mi divné mít odsazení řádků jiné než bude u zbytku stránky. Snažím se o klasickou reklamu - viz třeba články na novinky.cz. Budu mít nějaký obrázek v iframu. K tomu obrázku se bude vázat text. Chci, aby byly vidět najednou jak obrázek, tak text. Buď budu rolovat text nebo obrázek. Esteticky mi přijde lepší rolovat text, zatímco obrázek bude furt na jednom místě. Jestli to nějak schůdně pro mobil nepude, nechám to, jak je to teď - treba na to mobilni navstevnici casem prijdou :-) |
||
| žadatel Profil * |
#4 · Zasláno: 17. 7. 2015, 11:36:15
Pro představu: tady je ten iframe i text. Text mám v plánu rozšířit v některých případech, aby to nebylo jen několik jednoduchých vět. Protože "obrázek" je interaktivní, je žádoucí ho zobrazit s textem (který se k němu vztahuje), aby uživatel furt neroloval mezi textem a obrázkem.
Takže kromě možnosti A zmíněné výše se nabízí buď rolovat text nebo obrázek/iframe. Ukázal jsem o co se snažím a jestli třeba vymyslíte něco chytřejšího, budu jedině rád :-) |
||
|
Časová prodleva: 7 měsíců
|
|||
| žadatel Profil * |
#5 · Zasláno: 1. 2. 2016, 10:02:37
Trochu nesouvisející dotaz, ale nechtělo se mi zakládat nové vlákno...
Jaká je prosím příčina, že se text v divu s overflow:auto zobrazuje menší co do velikosti na mobilu (oproti zbytku textu, který není v divu s overflow:auto)? Na desktopu je velikost textu v divu i bez divu shodná. Mobil: samsung galaxy ace 3, android. Co je třeba příp. udělat, aby velikost textu v divu i bez divu byla shodná i pro mobil? |
||
| Tomáš123 Profil |
#6 · Zasláno: 1. 2. 2016, 10:18:41
žadatel:
S tým sa ťažko pracuje ak nevlastním taký mobil. Dodaj prosím živú ukážku, či neprestavuješ kdesi font-size... Prípadne, či sa to neprejavuje aj na iných mobilných zariadeniach alebo či sa neaplikuje nejaké media pravidlo.
|
||
| Str4wberry Profil |
#7 · Zasláno: 1. 2. 2016, 10:35:39
Tohle se někdy děje u neresponsivních webů (když na stránce není správná Značka
<meta name=viewport>).
Prohlížeč se potom může snažit přizpůsobit velikost textu, aby se stránka lépe četla. |
||
| žadatel Profil * |
#8 · Zasláno: 1. 2. 2016, 12:22:34
Str4wberry:
Vyzkoušeno bez viewportu a s viewportem. S viewportem ke zmenšení velikosti textu v divu s overflow:auto na mobilu nedochází => řeší to můj dotaz. Díky. |
||
| Str4wberry Profil |
#9 · Zasláno: 1. 2. 2016, 13:03:19
Jen doplním, že pokud ten viewport přidáte k stránce, která není responsivní, vytvoříte tím nejspíš větší problémy, než je různá velikost písma.
Zkusil bych na to použít text-size-adjust (možná, nemám otestované).
|
||
| žadatel Profil * |
#10 · Zasláno: 1. 2. 2016, 20:17:42
Hmm, pro držení mobilu na šířku je velikost divu s overflow: auto a okolního textu stejná (si myslím). O to víc mě překvapilo, že problém přetrvává, když se mobil přetočí na výšku (s viewportem).
Dá se toho klacku, který háže mobil pod nohy, nějak jednoduše zbavit? Nemám v plánu se v kódu moc vrtat (např. použitím text-size-adjust) - jinak ale díky za tip. Nesouvisí třeba problém s tím, že mám ve viewportu pevnou šířku? Živá ukázka viz třeba příspěvek 4 (první div s overflow : auto je v sekci "3.krok"). |
||
| Xanomes Profil |
#11 · Zasláno: 1. 2. 2016, 21:21:38
žadatel:
Těžko říct, nejjednodušší bude vyzkoušet viewport s width=device-width.
|
||
| žadatel Profil * |
#12 · Zasláno: 2. 2. 2016, 09:24:42
Xanomes:
S width=device-width zůstanou skutečně velikosti textu v divu a bez divu na mobilu shodné pro libovolné otočení. Zato se však rozpadne layout (vzniknou posuvníky), což je horší, než když bude text v divu menší po naklopení mobilu na výšku. Za mě vyhrává cesta nejmenšího odporu i za cenu nedokonalosti ve velikostech textů :-) |
||
|
Časová prodleva: 8 let
|
|||
0