Autor Zpráva
swisst
Profil
Zdravím!
pokouším se napsat web, který by byl skousnutelný pro mobilní zařízení (nicméně prioritou je PC).
Zjistil jsem, že v defaultním Androidím prohlížeči jsou odstavce užší než je jejich nastavená šířka.
V CSS je nastaveno

body, p {
    width: 728px;
    ...

a v hlavičce HTML mám
<meta name="viewport" content="width=728">

Na PC je vše ok (i v různých prohlížečích), ale na mobilu je to někdy podivné - odstavce jsou o něco užší. Tady je odkaz na printscreen z emulátoru
Ukázka emulátor Androidu
(tu šipku s otazníkem jesm tam dokreslil aby bylo vidět, kde by ten okraj měl být)
reálný mobil s Dolphinem se tváří podobně.

Dříve jsem neměl nastavený viewport a chovalo se to stejně.

Stránky jsou tady: http://fa.baldsoft.com/cz/facebook-analytics/

Máte někdo nápad co s tím? Nebo aspoň jak to ladit? Našel jsem emulátor Androidu, ale moc si nerozumíme :/
jefitto44
Profil
Ehm, hovorí ti niečo pojem responzívny dizajn?
swisst
Profil
jefitto44:
Ehm, hovorí ti niečo pojem responzívny dizajn?
Ano, nemám ho rád.
Píšu stránky pro PC a rád bych, aby to na mobilu vypadalo přijatelně.
Str4wberry
Profil
Délka odstavců je nejspíš zkrácena kvůli tomu, aby se při přiblížení (gesto dvojité poklepání) text vešel na displej bez posouvání do stran.

Řešení je nepoužívat fixní šířku. A když už, tak ne moc velkou, aby se takový prvek vešel. Orientační limit může být třeba 320 pixelů, což je šířka některých menších mobilů.

Zrovna na tom odkázaném webu není moc důvod, proč by měl mít fixní šířku.
jefitto44
Profil
swisst:
Ano, nemám ho rád.
To je bohužiaľ málo platné... ja nemám rád javascript a jeho frameworky, ale používať ich musím, pretože to ľudia chcú.
swisst
Profil
Str4wberry:
Díky za nasměrování. Předělal jsem to - šířka je fixní, ale nastavím ji podle velikosti displeje a zdá se to být ok.

Ale stejně se nějak nemůžu smířit s tím, že text se zalamuje dříve než mu skončí šířka bloku ve kterém leží.
Zkusil jsem to zjednodušit, tady je příklad na webu
.. a takhle se zobrazí v některých mobilech - text je prostě zalomený dřív a nechává vpravo volný okraj.

V HTML prakticky nic není, jen se nastaví šířka
<body style="width:700px;">
    Body se šířkou 700px<p>
    Lorem ipsum...
    
    <div style="width:700px; background-color:#ccc;">
        Div se šířkou 700px<p>
        Lorem ipsum...
    </div>
</body>

Je na to nějaké pravidlo? Nebo "se to prostě někdy stává"?
Tomáš123
Profil
swisst:
Je na to nějaké pravidlo?
Myslím, že stačí nastaviť text-aling: justify; (zarovnanie do bloku). Predvolene sa totiž text zarovnáva doľava a väčšinou sa ti nepodarí manuálne zalomiť slovo práve na hranici.
Juraj Hajdúch
Profil
Tomáš123:
Myslím, že stačí nastaviť text-aling: justify; (zarovnanie do bloku). Predvolene sa totiž text zarovnáva doľava a väčšinou sa ti nepodarí manuálne zalomiť slovo práve na hranici.

Len tam mimo tému. Myslím, že p. Mistrík vo svojej Štylistike uvádza štúdiu, že z hľadiska plynulosti čítania textu a aj jeho chápania (aj z estetického hľadiska) je praktickejšie zarovnanie doľava. Je to ale viac vec psychológie a osobných preferencií. V mnohých beletriách, vydaných za ostatné roky, som si všimol, že zarovnanie doľava je čoraz viac častejšie.
swisst
Profil
Tomáš123:
Ne, vyzkoušel jsem to, a text-align na to nemá vliv.
Ještě doplním, že se takhle choval mobil HTC. Teď to testuji na emulátoru Genymotion, který se chová podobně - pokud nastavím zařízení "Custom phone" s displejem 768x1280. Tuhle podivnost dělá, když je otočený "na výšku" (portrait). Když se otočí na šířku (landscape) tak je to ok.

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: