| Autor | Zpráva | ||
|---|---|---|---|
| brumla Profil * |
#1 · Zasláno: 5. 4. 2015, 19:53:11
Ahoj,
existuje nějaká možnost, jak optimalizovat stránku pro mobily, když stránka má fixní šířku 800 px? S šířkou hejbat nebudu, responzivní web tudíž nepřichází v tomto případě v úvahu. Očekávám odpověď že neexistuje - ptám se spíš pro ujistění se. |
||
| Chamurappi Profil |
#2 · Zasláno: 5. 4. 2015, 20:03:17
Reaguji na brumlu:
„Očekávám odpověď že neexistuje“ Místo ní dostaneš doplňující otázky :-) Co si představuješ pod pojmem optimalizace pro mobily? Jak chceš, aby to v nich vypadalo? |
||
| brumla Profil * |
#3 · Zasláno: 5. 4. 2015, 20:38:19
Chamurappi:
Ad 1 - aby stránka prošla mobile friendly testem od gůglu ad 2 - zhruba jako teď, když tam žádnej meta viewport není. Když dám číslo za width, gůgl vypíše že stránka nemá nastavený viewport pro mobily. Když dám za width width-device, vznikne vodorovný jezdec. Trochu začarovaný kruh... |
||
| Taps Profil |
#4 · Zasláno: 5. 4. 2015, 21:32:00
brumla:
V případě, že chceš vytvořit responzivní design tak je nejlepší použít media queries a šířku stránek přispůsobovat jednotlivým rozlišením dle mobilního zařízení |
||
| Chamurappi Profil |
#5 · Zasláno: 5. 4. 2015, 21:54:35
Reaguji na brumlu:
Ahá, takže ti jde jen o oblbnutí jedné strojové kontroly, nikoliv o optimalizaci pro mobily. „Když dám číslo za width, gůgl vypíše že stránka nemá nastavený viewport pro mobily.“ A když tam nedáš 800, ale třeba napevno 320, už mu to nevadí? „vznikne vodorovný jezdec“ Stránku můžeš při @media (width: 320px) zmenšit CSS vlastností transform: scale(číslo) (+ jejími oprefixovanými obdobami), aby se na displej celá vešla.
Chceš-li zobrazení jako teď, pokud při tom teď mobil simuluje šířku 1024, budeš asi chtít scale(0.3125). Asi bys měl nastavit i transform-origin: 0 0 (+ opět i s prefixy), aby se transformace počítala od levého horního rohu a ne od středu. Kdyby tě transform nazbavil posuvníků, zkus místo něj použít CSS vlastnost zoom, s tou už by to mělo být dokonalé (ovšem má menší podporu).
|
||
| brumla Profil * |
#6 · Zasláno: 5. 4. 2015, 22:22:40
Taps:
Nejsem expert, ale responzivni design asi nechci. Ze se na obrovitem monitoru zobrazi jen uzka nudle me netrapi (zatim). Co chci je optimalizace pro mobily. Doporucis literaturu k tem media queries? Nejak si neumim predstavit jak to funguje... Chamurappi: Ad strojova kontrolka - ano, da se to tak rict. Zaroven ale bych byl rad, kdyby i na realnem mobilu se ta stranka zobrazila hezky. Ad 320 - kdyby to nevadilo guglu, tak to bude vadit prave tomu realnemu uzivateli s jinou sirkou, ne? Zkusim 320, az se dostanu k pocitaci... ad zbyly text - chapu spravne, ze mi nabizis reseni pro konkretni sirku zarizeni, takze na zarizeni o jine sirce uz se stranka nezobrazi pekne? |
||
| Chamurappi Profil |
#7 · Zasláno: 5. 4. 2015, 23:10:46
Reaguji na brumlu:
„Zaroven ale bych byl rad, kdyby i na realnem mobilu se ta stranka zobrazila hezky.“ Co přesně znamená hezky? S šířkou hnout nechceš. „Ad 320 - kdyby to nevadilo guglu, tak to bude vadit prave tomu realnemu uzivateli s jinou sirkou, ne?“ Tou <meta> značkou přeci říkáš, jakou šířku má mobil simulovat. To už sis vyzkoušel s osmistovkou, ne? Když jsi nastavil 800, vadilo to reálnému uživateli s jinou šířkou než 800?
„Nejsem expert, ale responzivni design asi nechci.“ Responzivní design = media queries, víceméně. „Nejak si neumim predstavit jak to funguje...“ @media (width: 320px) {
/* sem flákneš CSS deklarace pro šířku 320 */
}@media používá min-width a max-width, protože pokud máš width=device-width, bývá šířka proměnlivá.
|
||
| Str4wberry Profil |
#8 · Zasláno: 5. 4. 2015, 23:22:19
Reakce na Chamurappiho:
„Stránku můžeš při @media (width: 320px) zmenšit CSS vlastností transform: scale(číslo)“
Když stránku zmenší, tak mu zase asi Google vynadá, že je moc malá (malé písmo, malé ovládací prvky). Navíc tipuji, že web bude mnohem hůře použitelný, než když se viewport nastavovat nebude – například kvůli tomu, že prohlížeče při zoomu dokáží upravit text tak, aby se nemuselo šoupat do stran, což asi při zmenšení měřítka fungovat nebude, ne?
Domnívám se tedy, že pokud responsivní web nepřipadá v úvahu, tak je nejlepší nedělat nic. |
||
| brumla Profil * |
#9 · Zasláno: 6. 4. 2015, 11:55:51
Hm. Dělá si to co chce, jak je u gůglu špatným zvykem. Když dám ten content="width=800", hází to, že není nastavený viewport pro mobily (+ že je text malý, odkazy jsou příliš u sebe a že jsou použity nekompatibilní pluginy). Když tedy brutálně zvětším písmo a mezeru mezi řádky (a nechám šířku těch 800), najednou testem stránka projde.
Protože stojí za "optimalizaci pro mobily" od gůglu jen jedna stránka na mém webu, tohle zvětšení písma a rozestupů mezi řádky by bylo asi nejschůdnějším řešením pro danou stránku (ostatní stránky na mém webu ať si gůgl penalizuje, když mu to udělá dobře - vypadaj pěkně na mobilu i bez viewportu). Syntaxe media queries je mi sice jakžtakž jasná, ale furt nevím, co bych měl měl fláknout jako CSS deklaraci... Taky mi nejsou jasné ty intervaly šířek: je dobré dát <1-799>, <800> a <801-plus nekonečno> nebo jak? Zkrátka media queries vypadaj jako dost práce s nejistým výsledkem v mobile friendly testu gůglu... Chamurappi: „A když tam nedáš 800, ale třeba napevno 320, už mu to nevadí?“ Vadí. |
||
| Tomáš123 Profil |
#10 · Zasláno: 6. 4. 2015, 17:06:26
brumla:
„ale furt nevím, co bych měl měl fláknout jako CSS deklaraci...“ To čo by si tam flákol, keby si pridával úplne nové štýly. Sem-tam ale bude potrebné nejaké deklarácie, ktoré si nastavil pre desktopové zobrazenie, prebiť na predvolenú hodnotu (asi najčastejšie float).
„Taky mi nejsou jasné ty intervaly šířek“ Väčšinou je desktopový layout ako tak pojazdný aj v o niečo väčších a menších rozlíšeniach. Stačia ti teda dve deklarácie, pre mobil a tablet (pre istotu môžeš pridať aj jednu pre niečo väčšie ako tvoj monitor). Do rozsahu začleníš interval od najväčšieho tabletu, po najväčší mobil (aby nebola nikde medzera) a potom napríklad od najväčšieho mobilu (-1px) po 240 - 200 pixelov, aby to bolo pre každého. Ak sa budú nejaké deklarácie opakovať v obidvoch variantách, môžeš ich umiestniť pod jedno pravidlo s väčším rozsahom. |
||
| pcmanik Profil |
#11 · Zasláno: 6. 4. 2015, 20:06:03
Tomáš123:
A aké sú tie dve presné deklarácie pre mobil a tablet? Rozlišení je množstvo a najlepší postup je hadám len zmenšovať šírku a keď sa niečo "rozbije" nastaviť breakpoint. |
||
| Tomáš123 Profil |
#12 · Zasláno: 6. 4. 2015, 20:16:20
pcmanik:
„A aké sú tie dve presné deklarácie pre mobil a tablet?“ Väčšinou pri zužovaní prvky radíme pod seba a nechávame im prirodzené vlastnosti blokových prvkov (roztiahnu sa na 100% šírky). „Rozlišení je množstvo a najlepší postup je hadám len zmenšovať šírku a keď sa niečo "rozbije" nastaviť breakpoint.“ Nie vždy. Niekedy tým elastickým zužovaním akurát zhoršíš čitateľnosť i keď sa nič nerozbije. Niekedy je najjednoduchšie pozrieť sa na stránku, rozmyslieť si ako sa tie bloky zoradia pod seba, vytvoriť im nové CSS odstrániť spoločné deklarácie a vynulovať deklarácie nepotrebné. Teoreticky väčšinou robíme všetky tri kroky naraz, ale pre niekoho, kto nevie ako začať môže byť tento (i keď zdĺhavejší) postup nápomocný. |
||
|
Časová prodleva: 5 dní
|
|||
| brumla Profil * |
#13 · Zasláno: 11. 4. 2015, 10:17:24 · Upravil/a: brumla
Taps:
Díky za tip, vše jsem vyřešil @media (max-device-width: 801px) a zvětšením fontu. Na desktopu se nic nezměnilo, na mobilu to vypadá dobře a k tomu jsem prošel testem gůglu :-) Měl bych ale ještě jeden dotaz: k čemu že je initial-scale? Když dám totiž initial-scale=1, stránka na mobilu se zobrazí trošku posunutá doleva. Když tam dám jen width=800 (tj. bez initial-scale), vypadá to v mobilu líp... DJPW taky initial-scale nepoužívá koukám... Tak ne - vypadá to stejně s initial-scale=1 i bez initial-scale=1. Proč to tedy DJPW nepoužívá, resp. k čemu je to dobrý? |
||
| Taps Profil |
#14 · Zasláno: 13. 4. 2015, 07:04:09
brumla:
viz článek http://programujte.com/clanek/2013062900-nastroje-responzivniho-webdesignu/ |
||
|
Časová prodleva: 9 let
|
|||
0