Autor Zpráva
Pavel Jé
Profil *
Dobrý den,

narazil jsem po delší době na problém s responsivním designem na webu www.iphonepujcovna.cz. Ve všech prohlížečích funguje web správně, ale v jakémkoli Internet Exploreru je web totálně v háji. Protože tento prohlížeč nepoužívám nevěnoval jsem tomu až takovou pozornost. V podstatě pokud mi web funguje v Safari, Firefoxu a Opeře, tak neočekávám velké rozdíly v IE, ale tady v tomto případě je to teda šílené.

Nevíte čím to může být? To se pro IE píše responsivní kód jinak nebo stačí jen něco vložit do hlavičky?

Předem děkuji za pomoc!

Pavel
Tomášeek
Profil
Pavel Jé:
Explorery nikdy neuměly s media queries pracovat (nepodporovaly a tuším ani nepodporují).

Řešením je psát desktop-first kód (pro explorery včetně), pro mobily pak responsivnit (IE bude ignorovat). Při mobile-first přístupu je třeba IE servírovat stylopis vzniklý průnikem responsivních částí, které jsou platné pro desktop, stejný jako při desktop-first.
Kcko
Profil
Pavel Jé:
Pro starší IE Ti pomůže github.com/scottjehl/Respond , navíc Ti tam chybí meta tag <meta name="viewport" content="width=device-width, initial-scale=1">
edit: tag tam máš, ale možná ho zkus přemístit někam nahoru, v IE 11 máš web skutečně rozsypaný, problém bude někde jinde.

Tomášeek:
Ale uměly, od IE 9, ověř si to, než napíšeš blábol.
Pavel Jé
Profil *
Starší IE neřeším, postačí IE 9 nahoru, psát v dnešní době pro IE je horor a podporovat ještě ty starší, to snad není ani mým cílem. Proč však blbne web i na novějších, které si s media... poradí :/
Kcko
Profil
Pavel Jé:
Blbne Ti např. můj web? rjwebdesign.cz? Respond tam nemám. Dej si ten viewport někam nahoru, máš ho za JS smartlookem , nevím jestli to nedělá ten problém ...
Pavel Jé
Profil *
Neblbne, já to testuji tady: netrenderer.com

Mám Mac OS X tak to nemám jak otestovat. Viewport jsem dal nahoru a nepomohlo.


Pomohlo oddělat tento řádek v css:

@media all {html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, select, textarea, button {   background: transparent no-repeat left top; border: 0; color: inherit; font-size: 100%;  font: inherit;  margin: 0;  outline: none;  padding: 0;  vertical-align: baseline; }

:/ ale zase to rozdupe něco jiného
Kcko
Profil
Pavel Jé:
a v @media all to máš proč?

Naslepo: (S tímto vždy začínám HTML stránku)

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
Pavel Jé
Profil *
V podstatě ani nevím, proč to tam mám, v nějakém návodu to bylo že to vynuluje všechny "problémy"... ale asi to není až taková výhra..
Kcko
Profil
Pavel Jé:
Jestli Ti jde o to zresesovat prvky tak na to slouží necolas.github.io/normalize.css + nějaké odrůdy.
Ten media all ani neznám, a očividně to dělá nějaké problémy.
Pavel Jé
Profil *
Očividně to je akorát na škodu. Tak jsem rád, že se na to přišlo a minimálně až napadne někoho podobná blbost, tak ví, že to má dát pryč.

Díky za pomoc! Jdu to vyladit bez toho nesmyslu.

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Prosím používejte diakritiku a interpunkci.

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