Autor Zpráva
fandam007
Profil *
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 potom si sprav napr. Css responsive.css
A tam pridaj
@media (max-width: xxxpx) alebo @media (min-width) alebo @media (min-width) and (max-width) atď....
Nastavuje to potrebám šírky a výšky ... riešilo sa to nespočetne mnoho krát aj tu na diskuse.jpw.cz aj na Google je Kvantum toho daj si responsive web a tam sa už potrebné veci naučíš
----------------
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">
je to dôležité :) hádam takto v skratke som ťa aspoň naviedol na správnu cestu bádania a učenia :)
===============
Úprava
===============
Samozrejme sú aj iné finty no ja používam iba túto vyššie uvedenú :-)
Taps
Profil
fandam007:
Ke studiu, viz http://jecas.cz/responsive
anonymníí
Profil *
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
Konkrétní postup převodu starého webu na responsivní jsem popsal tady: Převod webu na responsivní design
Sennin
Profil
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
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
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 *
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
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 *
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
fandam007
nemusí to byť presne min-width môže to byť aj obyčajne width čí max-width
Trejpa
Profil
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 *
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
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.
fandam007
Profil *
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
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
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 *
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
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
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 :-)
fandam007
Profil *
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 *
Jak dám boční nabídku dolů pod obsah?
Fisir
Profil
Reaguji na fandama007:
Zrušíš to, čím jsi ji dal na bok.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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