| Autor | Zpráva | ||
|---|---|---|---|
| fandam007 Profil * |
#1 · Zasláno: 10. 6. 2015, 23:49:05
Zdravím, na mém webu epigon.8u.cz/webradio je jeden problém a tím je, že web není responzivní. Zkoušel jsem v možnosti Zkontrolovat prvek, která je v Google chrome postupně měnit údaje, ale web stále zůstal stejný. Co mám tedy doladit?
|
||
| Sennin Profil |
Nazdar fandam007
Pretože máš web písaný v px a tie pri zmene nemenia svoje hodnoty :) Zvykne sa písať web v % najčastejšie width: 100% Ale preto je dobré to @media (xxxx) pretože ak máš web v px tam ich hodnoty môžeš meniť upraviť atď... Pokúsim sa v skratke ostatné si doštuduješ pomocou Google :D do head v Html si pridáš toto <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> A tam pridaj @media (max-width: xxxpx) alebo @media (min-width) alebo @media (min-width) and (max-width) atď.... ---------------- Nezabúdaj v HTML mať toto <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> =============== Úprava =============== Samozrejme sú aj iné finty no ja používam iba túto vyššie uvedenú :-) |
||
| Taps Profil |
#3 · Zasláno: 11. 6. 2015, 07:04:33
fandam007:
Ke studiu, viz http://jecas.cz/responsive |
||
| anonymníí Profil * |
#4 · Zasláno: 11. 6. 2015, 08:54:11
Sennin:
„do head v Html si pridáš toto <meta http-equiv="X-UA-Compatible" content="IE=edge">“
Proč? Co máš tato metaznačka co společného s responsivností? |
||
| Str4wberry Profil |
#5 · Zasláno: 11. 6. 2015, 09:44:38
Konkrétní postup převodu starého webu na responsivní jsem popsal tady: Převod webu na responsivní design
|
||
| Sennin Profil |
#6 · Zasláno: 11. 6. 2015, 10:48:57
anonymníí:
Sorry ja tie dve dávam spolu samozrejme <meta http-equiv="X-UA-Compatible" content="IE=edge"> <-- toto zabezpečuje Kompatibilitu s Explorerom Edge ako je to možné vyčítať
Ale <meta name="viewport" content="width=device-width, initial-scale=1"> <-- toto mú zabezpečí responsivitu na mobile :D
Musíš ma brať z nadhľadom tú prvú meta značku ber ako bonus k druhej :D |
||
| Radek9 Profil |
Sennin:
„toto zabezpečuje Kompatibilitu s Explorerom Edge ako je to možné vyčítať“ Co prosím? To jenom Exploreru řekne, aby použil pro renderování poslední verzi enginu, kterou má k dispozici. Což dělá i defaultně, co se týče internetových stránek. Smysl to má v intranetu. A když už je vážně potřeba X-UA-Compatible nastavit, je mnohem lepší to udělat přes header, protože pak IE nemusí přerenderovávat stránku. |
||
| Fisir Profil |
#8 · Zasláno: 11. 6. 2015, 12:55:35
Reaguji na Radka9:
„Což dělá i defaultně, co se týče internetových stránkách.“ Obávám se, že to závisí na doctype.
|
||
| Radek9 Profil |
Fisir:
Nemá smysl použítvat jiný doctype než <!doctype html>, takže v tom případě naběhne standardní režim a IE automaticky renderuje v edge módu.
|
||
| Chamurappi Profil |
#10 · Zasláno: 11. 6. 2015, 13:13:38
Reaguji na Sennina:
„toto zabezpečuje Kompatibilitu s Explorerom Edge“ Pokud tím myslíš ten nový prohlížeč, který Microsoft označuje jako Edge, tak zrovna ten nejspíš bude na tuto <meta> značku kašlat. Na rozdíl od Explorerů 8 až 12, které podle ní přepnou vykreslovací jádro.
„tú prvú meta značku ber ako bonus k druhej :D“ Vůbec nijak s ní nesouvisí. Reaguji na Radka9: „Smysl to má v intranetu.“ Nebo na doméně, kterou má MS zařazenou na pravidelně aktualizovaném seznamu domén, o nichž si myslí, že potřebují starší režim. Ve starších verzích Exploreru ta značka způsobuje, že se uživateli neukáže tlačítko na přepnutí do sedmičkového režimu. Takže není špatný nápad ji uvádět. Ale samozřejmě absolutně nijak nesouvisí s responsivním webem… „je mnohem lepší to udělat přes header, protože pak IE nemusí přerenderovávat stránku“ To při použití <meta> značky nedělá. Buď ji najde dřív, než renderovat začne, nebo ji ignoruje.
Reaguji na Fisira: „Obávám se, že to závisí na doctype.“
Částečně. V nových verzích má nový quirk a přepínač standard/quirk je nezávislý na nastavené verzi jádra. |
||
| fandam007 Profil * |
#11 · Zasláno: 11. 6. 2015, 16:59:27
Pokusil jsem se ve fci zkontrolovat prvek různými kombinacemi udělat to, co říkáte (i to, co je psáno na webu jecas.cz), ale stále mi ta responzivita nějak nejde
|
||
| Fisir Profil |
#12 · Zasláno: 11. 6. 2015, 17:57:21
Reaguji na fandama007:
Pořád máš nastavenou minimální šířku stránky (možná i něco dalšího, dál jsem to nezkoumal). |
||
| fandam007 Profil * |
#13 · Zasláno: 11. 6. 2015, 20:33:03
A kde najdu nastavení minimální šířky? Po vyhledání min-width ve style.css jsem vše upravil na 100% a později na 50%, ale stále nic
|
||
| Sennin Profil |
#14 · Zasláno: 11. 6. 2015, 20:59:08
fandam007
nemusí to byť presne min-width môže to byť aj obyčajne width čí max-width |
||
| Trejpa Profil |
#15 · Zasláno: 11. 6. 2015, 21:15:08
fandam007:
Je tam několikrát zadaná přesná šířka 960 bodů. Podle jména souboru a tříd usuzuji, že jsi použil, teď už zbytečný, systém na tvorbu mřížky. Myslím, že místo záplatování bumbrlíčka by stránce spíš prospělo postavit layoutu od začátku, na zelené louce. Je ti jasné, že načítání každého souboru brzdí zobrazení stránky, zejména ty v hlavičce? Načítat 19 stylů a 9 skriptů je hodně špatný nápad. Konkrétně se tě týká třída .container_12 na 29. řádku v souboru grid.css. Ovšem jak budou reagovat zanořené bloky, které jsou na tento mřížkový systém navázané, není těžké uhodnout. Bude je potřeba také změnit. |
||
| fandam007 Profil * |
#16 · Zasláno: 11. 6. 2015, 21:25:59
Prošel jsem snad všechny body 960 px a nahradil je 100%, ale pořád nic. Web jsem nedělal já, ale je to stažená šablona.
|
||
| Trejpa Profil |
#17 · Zasláno: 11. 6. 2015, 22:17:02
fandam007:
V uvedeném souboru je stále .container_12 { width: 960px; } (od řádku 25). Samotný vnější blok nastavit na 100 % nepomůže, když jsou i vnitřní bloky nastaveny napevno. Ve stejném souboru se to týká minimálně deklarací .container_12 .grid_8 { width: 620px; } a .container_12 .grid_4 { width: 300px; }. A ještě něco, ty bloky mají nastavený margin 10 px. Ten při procentní šířce bude dělat neplechu. Vynuluj ho a odsaď až zanořené bloky uvnitř. Margin by se dal také nastavit v procentech, ale jeho dopočítání spolu s šířkou bloků bude pro tebe asi trochu těžší, jelikož se odvozuje od vnitřních bloků, které při stávajícím poměru rozhodně nebudou vycházet na celá čísla.
A pokud někdo používá třeba monitor o šířce 2560 bodů a náhodou si tvoji „responzivní“ stránku zobrazí v maximalizovaném okně prohlížeče, tak ti nepoděkuje - texty na tak dlouhých řádcích skoro nepůjdou přečíst. Mysli na to, že čitelný řádek obsahuje tak 80, nejvýše 100 znaků. Takže použij i max-width pro obsah, nejlépe odvozený od velikosti nebo šířky písma. |
||
|
Časová prodleva: 4 dny
|
|||
| fandam007 Profil * |
#18 · Zasláno: 15. 6. 2015, 20:56:09
Udělal jsem všechno, co říkáte, ale web stále vypadá divně. Nešlo by responzivitu udělat tak, že by se horní lišta stáhla do dnes už klasického menu u mobilních telefonů (mám na mysli takové ty 3 čárky nad sebou)? A potom jestli by šla dát od určité šířky pravá nabídka pod obsah?
|
||
| Sennin Profil |
#19 · Zasláno: 16. 6. 2015, 00:24:53
fandam007:
Najvhodnejšie by bolo prekopať celú stránku a upravovať ju do požadovaných rozmerov atď.... Ohľadom toho menu je to responsive menu css alebo mobile menu css a na internete je toho kopa tutoriály atď.... P.S. myslím, že dosť konkrétne sa k tomu vyjadril aj Trejpa |
||
| snazimse Profil |
#20 · Zasláno: 16. 6. 2015, 06:36:29
Radek9:
„Smysl to má v intranetu“ Můžu poprosit o rozvedení jaký to má smysl na intranetu? Děkuji! Chamurappi: „Ve starších verzích Exploreru ta značka způsobuje, že se uživateli neukáže tlačítko na přepnutí do sedmičkového režimu.“ To je hrůza, není chvíle neřešení pseudo-IE, ten prohlížeč jsem používal aktivně v roce 1999 a to byli první styky s počítačem, takže to bylo jedno :) Dneska je to zabité. Ale co jsem viděl něco z IE 10, tak by mohla příjít slušná změna, nebo mít alespoň nakročeno no :) |
||
| anonymníí Profil * |
#21 · Zasláno: 16. 6. 2015, 06:45:27
snazimse:
„není chvíle neřešení pseudo-IE“ Než pseudo-IE, jestli spíš nebude chyba v pseudo-kodérech :-) |
||
| Radek9 Profil |
snazimse:
„Můžu poprosit o rozvedení jaký to má smysl na intranetu? Děkuji!“ IE má většinou defaultně nastaveno, že na intranetové stránky používá kompatibilní zobrazení. Je to v nastavení pod Nastavení kompatibilního zobrazení -> Zobrazit intranetové servery v kompatibilním zobrazení. Takže je občas vhodné to hlavičkou ze serveru přebít a nastavit na edge. |
||
| snazimse Profil |
#23 · Zasláno: 17. 6. 2015, 00:16:09
anonymníí:
„Než pseudo-IE, jestli spíš nebude chyba v pseudo-kodérech :-)“ Nebude, je spousta věcí, které fungovaly všude jen ne v IE. Radek9: „IE má většinou defaultně nastaveno, že na intranetové stránky používá kompatibilní zobrazení. Je to v nastavení pod Nastavení kompatibilního zobrazení -> Zobrazit intranetové servery v kompatibilním zobrazení. Takže je občas vhodné to hlavičkou ze serveru přebít a nastavit na edge.“ Děkuji. No tak to je zase perla :) |
||
| Chamurappi Profil |
#24 · Zasláno: 17. 6. 2015, 00:45:52
Reaguji na snazimse:
„Nebude, je spousta věcí, které fungovaly všude jen ne v IE.“ A naopak. Třeba AJAX fungoval hodně dlouho jen v Exploreru, vlastnost innerHTML také, :hover, contenteditable… je toho fůra.
O čem to tu vlastně brebentíš? Že tlačítko umožňující uživateli přepnutí do jiného režimu je problém? To jako fakt? Já vidím jako problém spíš to, že ostatní prohlížeče podobnou možnost nemají a samovolně rozbíjejí zpětnou kompatibilitu každých pár měsíců. Říct do telefonu „zmáčkni tenhle čudlík“ je mnohonásobně snazší, než vysvětlit, jak nainstalovat starší verzi prohlížeče. „No tak to je zase perla :)“ To si jako myslíš, že je levnější upravit všechny existující intranetové aplikace navržené pro starší verzi Exploreru, než do těch nových přidat jeden hrůzný řádek? Sám jsi perla :-) |
||
|
Časová prodleva: 1 měsíc
|
|||
| fandam007 Profil * |
#25 · Zasláno: 31. 7. 2015, 18:59:03 · Upravil/a: fandam007
Zdravím, začal jsem pracovat na responzivitě webu. Podívejte se na něj a napište, co mám změnit: (přihlášení) a zadejte údaje: Login: beta, heslo: beta
*Musíte se přihlásit, protože je web v režimu údržby |
||
| fandam007 Profil * |
#26 · Zasláno: 2. 8. 2015, 09:48:07
Jak dám boční nabídku dolů pod obsah?
|
||
| Fisir Profil |
#27 · Zasláno: 2. 8. 2015, 17:51:31
Reaguji na fandama007:
Zrušíš to, čím jsi ji dal na bok. |
||
|
Časová prodleva: 9 let
|
|||
0