| Autor | Zpráva | ||
|---|---|---|---|
| Peet Profil |
#1 · Zasláno: 3. 12. 2014, 19:12:26
Dobrý den, spravuji tento projekt, který jsem se pokusil udělat v responsivním designu.
Vše je jakš takš normální, ale dnes se na mě obrátil jeden zákazník s tím že u mobilu Samsung S3 je to příliš malé, když jsem koukal na rozlišení tohoto telefonu tak jsem se dočetl 720x1280. Sice nevím jak to je s těmi rozlišeními mobily vs pc apod. ale říkám si, že jestli ten mobil má na šířku 1280 což je jako menší monitor, tak se to bude zobrazovat podobně jako na pc, tudíž se nedivím že je písmo malé. Kdyby mi mohl někdo osvětlit toto téma s rozlišeními byl bych rád a dále jsem si myslel že tento řádek v hlavičce <meta name="viewport" content="target-densitydpi=device-dpi">
zajišťuje, aby uživatel na mobilu,tabletu nemohl web zoomovat, ale když jsem se tedy rozhodl toto umožnit tak jsem to odstranil a stále to nejde .D . Takže budu rád za jakoukoliv radu či vysvětlení. |
||
| jefitto44 Profil |
#2 · Zasláno: 3. 12. 2014, 19:22:35
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
Toto zaistí, že užívateľ nebude môcť zoomovať. Používam a funguje. Čo sa týka rozlíšenia, tak media queries vlastne neriešia, či ide o mobil, či o tablet, alebo o televízor. Oni riešia len jedno jediné a to je rozlíšenie monitora. Čiže ak si zoženieš kalkulačku so šírkou displaya 1920px, tak ti bude zobrazovať na šírku ako "fullHD" monitor. Všetko ostatné, čo sa zobrazuje inak, je problém prehliadača na danom zariadení. To znamená, že prehliadač nepozná/nepodporuje tú-ktorú CSS vlastnosť, alebo ako by som to opísal. V skutočnosti však lacný androidový shit má väčšie rozlíšenie ako desktop na ktorom beží zákerný IE (dúfam že zas kvôli tejto vete skončí tento príspevok v koši...!). Riešením je urobiť pomocou media queries CSSko pre iks rozlíšení. Osobne začínam na 320px a končím na rozlíšení pre hlavný layout (čiže 980px v 980px gride, 1160px v 1160px gride atď). Storočné mobily s menšími displaymi aj tak nevedia, čo to je media queries |
||
| Peet Profil |
#3 · Zasláno: 3. 12. 2014, 19:44:13 · Upravil/a: Peet
Já tomu rozumím a používám media queries od 320 do nějakých 1280, ale tím se nevyřeší to, že na mobilech s velkým rozlišením půjde vidět velký h****. Takže jinak když nepoužívám žádný <viewport> jak je možné, že nejde zoomovat ?
Tak jsem to nakonec našel v souboru bootstrap.js, který jsem já nepsal. Nicméně pokud tomu rozumím initial-scale = při načtení maximum-scale = jak moc se může zazoomovat minimum-scale = jak moc se může odzoomovat ? |
||
| jefitto44 Profil |
#4 · Zasláno: 3. 12. 2014, 21:44:34
Maximálna a minimálna škála... niektoré mobily zobrazujú dvojnásobnú... napr. máš display pôvodne určený na 320px, ale on zobrazuje 640... a to je práve to scale... pomocou neho nastaviš, že na malom 320px displayi sa má stránka zobraziť ako 320px, nikoli ako 640px. Teda za predpokladu, že tomu dobre rozumiem ja.
|
||
| Chamurappi Profil |
#5 · Zasláno: 3. 12. 2014, 22:04:44
Reaguji na jefitta44:
„Toto zaistí, že užívateľ nebude môcť zoomovať. Používam a funguje.“ Což je pro uživatele, který si stěžuje, že je web příliš malý, úplně ideální :-) „Čiže ak si zoženieš kalkulačku so šírkou displaya 1920px, tak ti bude zobrazovať na šírku ako "fullHD" monitor.“ Velmi nepravděpodobné. Takové chování by šlo proti zájmům uživatele. „dúfam že zas kvôli tejto vete skončí tento príspevok v koši...!“ Kvůli zbytku tvého blábolení by mohl. Příspěvky, u nichž očekáváš smazání, laskavě nepiš. Reaguji na Peeta: Použij stejný viewport, jako je ve zdrojáku této diskuse…
„když jsem koukal na rozlišení tohoto telefonu tak jsem se dočetl 720x1280“ To je celkem zbytečný údaj, důležité je, kolik prohlížeč tvrdí, že je device-width. Většinou je CSS pixel větší než skutečný pixel displeje. Jeho velikost obvykle trošku souvisí s fyzickými rozměry zařízení, malé telefony se tváří na výšku jako 320px a na šířku jako 480px, tablety obvykle hlásí kolem tisíce pixelů.
Pokud neuvádíš vůbec žádný viewport, telefon obvykle předpokládá, že stránka pro něj ještě není odladěná a simuluje šířku kolem tisíce pixelů, aby se přiblížil desktopu.
|
||
| Peet Profil |
Chamurappi:
Děkuji za info, jak bych tedy mohl docílit toho aby se u novějších mobilů, které tedy mají větší rozlišení (stránka je malá až nečitelná) zobrazoval web správně,responzivně ? U většiny mobilů je to OK a u tabletů také, ale novější telefony jako třeba S4 nebo i ta S3 a potom nějaké novější HITACHI apod. tak tam je to opravdu takové malé a jestli to chápu správně tak když dejme tomu, že tento mobil bude mít device-width kolem toho tisíce a já bych změnil media queries tak aby v tomto rozlišení byla stránka "větší,přiblíženější", když to tak řeknu, tak poté zase bude na tabletu který má také tisíc až příliš velká :D tak jaké je tedy řešení ?
|
||
| Chamurappi Profil |
#7 · Zasláno: 3. 12. 2014, 22:21:55
Reaguji na Peeta:
Jak už jsem psal, použij stejný viewport, jako je ve zdrojáku této diskuse.
„jestli to chápu správně tak když dejme tomu, že tento mobil bude mít device-width kolem toho tisíce“ Nebude, bude mít něco mezi 320 a 640. |
||
| Peet Profil |
#8 · Zasláno: 4. 12. 2014, 00:03:29
Chamurappi:
„Nebude, bude mít něco mezi 320 a 640.“ To není možné, protože pro rozlišení 320-640 mám v media queries úplně jiné zobrazení než které se zobrazuje. |
||
| Chamurappi Profil |
#9 · Zasláno: 4. 12. 2014, 00:26:18
Reaguji na Peeta:
Jak už jsem psal, pokud neuvádíš vůbec žádný viewport, telefon obvykle předpokládá, že stránka pro něj ještě není odladěná a simuluje šířku kolem tisíce pixelů, aby se přiblížil desktopu.
|
||
| DJ Miky Profil |
#10 · Zasláno: 4. 12. 2014, 11:43:21
Zkoušel jsem, jak se chová telefon s Androidem, který má 5 palců a rozlišení 1080×1920 pixelů:
– při nastaveném viewportu (width=device-width) hlásí šířku 360 pixelů při orientaci na výšku a 640 pixelů při orientaci na šířku,
– s chybějícím viewportem hlásí šířku 980 pixelů, nicméně závisí to na použitém prohlížeči a nastavení. V některých je standardně zapnuta volba typu „Use wide viewport“, která použije zmíněných 980 pixelů. Pokud se odškrtne, telefon hlásí 360 nebo 640 pixelů i bez uvedeného viewportu.
|
||
|
Časová prodleva: 9 let
|
|||
0