Autor Zpráva
CZghost
Profil
Zdravím. S narůstajícím počtem uživatelů tabletů a smartphonů bych potřeboval implementovat podporu pro tato zařízení na své stránky (respektive na vlastní styl WordPressu). Klasický layout pro počítače by byl vhodný i pro uživatele tabletů, ale pro mobily, jejichž displej je jen o něco málo větší než platební karta, se tento layout nehodí.


Tohle je klasický layout pro počítače a tablety, které mají obrazovku na šířku. Když uživatel změní orientaci na výšku, potřeboval bych zajistit, že layout se změní na ten mobilní, který je níže. Mobily svůj layout zobrazí vždy, bez ohledu na to, jestli je stránka na výšku nebo na šířku.


Mobilní layout, ten postranní panel by měl být standardně schovaný, ukázat by se měl až po vyjetí prstem (umí to webové stránky vůbec?). Abych indikoval, že tam nějaký postranní panel je, potřeboval bych tam dát nějaký proužek, který značí, že tam je.

Jelikož nemám tablet, ani smartphone, nemůžu testovat svoje stránky na těchto zařízeních a tudíž nemůžu vidět, jak to na nich vypadá v průběhu testování. Potřeboval bych zajistit funkčnost otáčení obrazovky (některé mobily to mají už zavedené), ten touch-sensitive postranní panel, a především zajistit vzhled stránek. Pro počítače bych zobrazil na pozadí náhodný screenshot ze hry, na kterou jsem si svoje stránky udělal, pro tablety a smartphony bych zobrazil šířku stránky na celou obrazovku (ať se využije každé volné místo na obrazovce). Ostatně je to tak i na přiložených obrázcích.

Nějaké nápady?
Str4wberry
Profil
Testovat lze relativně slušně i na běžném PC – Testování webů napříč prohlížeči

Menu bych doporučoval udělat spíš tlačítkem, které ho vysune. Samotný proužek by nemusel být dost pochopitelný.
jefitto44
Profil
Počul si o responsive designe?
CZghost
Profil
Str4wberry:
Děkuju za link na nástroje, o této možnosti jsem vůbec nevěděl :D Mě zajímá, jak udělat ten layout tak, aby měl stejný základ, ale aby vypadal trošku jinak v Desktopu a Androidu :-) Hlavně CSS a funkčnost, jaký layout je pro tato zařízení nejvhodnější, atd...

jefitto44:
Pojem jako takový jsem ještě neslyšel, ale na link jsem se koukal a já hledám trošku něco jiného. Ještě jsem nedělal stránky pro mobily, takže hledám veškeré možné zdroje...
Breeta
Profil *
To co chceš je responzivní web (responsive layout), layout který se přizpůsobí rozlišení obrazovky, používají se na to nástroje jako je např. bootstrap ...
jefitto44
Profil
Dá sa to aj ručne. Môžem odporúčiť tento článok: http://brm.sk/485/ako-na-responsive-design
CZghost
Profil
Nojo, ale pro mobily jsem ještě design nedělal a neznám veškeré "nativní" rozměry monitorů, smatphonů a tabletů. Vlastně neznám skoro žádné. Potřebuju hlavně šířky, podle nich pak můžu ladit design. Dá se to někde najít?
Fisir
Profil
Reaguji na CZghosta:
Být tebou bych nedělal design na pixely, ale procenta. Problém u smartphonů a tabletů je, že žádné nativní rozlišení neexistuje, je jich celá řada.
jefitto44
Profil
Utfg

Problém je to, že mobily majú zavše lepšie prehliadače ako desktopy
martin1312
Profil
jefitto44:
prehliadače možno áno, ale výkon nie. Preto by som vyťahal za uši všetkých, čo používaju bootstrap a najlepšie, keď tam nechajú všetky komponenty...
CZghost
Profil
Fisir:
No nevím, ale na stránce, kterou nalinkoval jefitto44 se píše o nativním rozlišení, které je menší, než skutečné. Mobil tak zobrazí tečku 1 px třebas na 3 px a tím pádem jemnější než na klasickém desktopu... Jinak se rozměry počítají jako na klasickém desktopu. Teda aspoň tak jsem to pochopil. Mám otevřený emulátor mobilního prohlížeče v Chromu a Wikipedie se tam ukazuje v kompaktním provedení. Na mobilu lze i editovat, tudíž se můžu normálně přihlásit a psát, jako bych byl na klasickém počítači (smartphone nemám, tablet také ne, ale emulátor se zdá funguje dobře)... Písmo je malinko větší, ale to je tak udělané schválně kvůli lepší čitelnosti. Žádné dvojnásobné nebo trojnásobné zvětšení...

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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