Jedny css pro mobil, druhé css pro ostatní

Dandys2012:
Aj keď pochybujem, že by práve toto by mohlo spôsobovať problém, skús kód upraviť takto:

Ak to nepomôže, skús načítať iba jeden CSS súbor a vo vnútri neho rozdeliť deklarácie podľa rozlíšenia zápisom:
Tak aspoň zistíš, či sú tvoje deklarácie správne a či nie je problém inde. Ak ti to ani potom nebude fungovať, ozvi sa...

Dandys2012:
Niečo je zlé u teba, najjednoduchšia verzia tvojej podmienky bez problémov funguje. Skontroluj, či máš správne pomenované elementy, poprípade či vlastnosti nastavované dotazom na médium neprebíjaš niekde inde. Ak nič nenájdeš, prosím pridaj odkaz na živú ukážku tvojho webu, respektíve vlep svoj kód do tunajšieho editora http://kod.djpw.cz.

Dandys2012:
To sa stáva aj mne :-)

Tento krátky článok ti rozhodne pomôže... všimni si metu

http://brm.sk/wp-content/demos/responsive/

Responsive odporúčam robiť tak, že do style.css (alebo do tvojho hlavného css súboru) iba jednoducho napíšeš
@media screen and (max-width:801px) {
CSS pre mobil
}

Reaguji na Tomáše123:
„Aj keď pochybujem, že by práve toto by mohlo spôsobovať problém, skús kód upraviť takto“
Bylo by dobré vysvětlit, co only dělá. (Pak by bylo očividné, že mu nepomůže.)


Reaguji na Dandyse2012:
Pokud do kódu neuvedeš <meta name="viewport" content="width=device-width">, mobilní prohlížeče obvykle simulují šířku 1024, aby se v nich dobře zobrazovaly weby určené pro desktop.

Chamurappi:
„Bylo by dobré vysvětlit, co only dělá. (Pak by bylo očividné, že mu nepomůže.)“
Viem čo znamená resp. robí only: Ak uvediem "only screen" znamená to, že uvedené deklarácie sa nevzťahujú napríklad pre tlač, ale len pre obrazovku. Avšak domnieval som sa, že bez only je podmienka nedokončená a preto nepracuje správne.

Z vysvetlenia pre Dandysa2012 som si veľa zobral aj ja :-).

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

Týmto zakážeš užívateľovi, aby si na mobile dokázal zoomovať stránku, čo je pri responsive aj tak zbytočné... ten, kto roluje responsive stránku to robí najskôr nechtiac...

Reaguji na Tomáše123:
„Ak uvediem "only screen" znamená to, že uvedené deklarácie sa nevzťahujú napríklad pre tlač, ale len pre obrazovku.“
Zatímco samotné screen bez only znamená co? Totéž, co all? Ne, při tisku se také nebere.

Slovo only nemá žádný význam. Vzniklo pouze proto, aby pomocí něj šlo stoprocentně odstřihnout prohlížeče neznající složené @media queries, u nichž by hrozilo, že si z media="screen and (min-width: 801px)" vezmou jen screen. Žádný takový prohlížeč ale už mnoho let v oběhu není, starší Explorer reaguje jinak.


Reaguji na jefitta44:
„Týmto zakážeš užívateľovi, aby si na mobile dokázal zoomovať stránku“
Tohle mě jako uživatele dost štve. Proč to vůbec někdo dělá? Co to je za argument, že je to zbytečné? Když usoudím, že zoomovat potřebuji, tak mi jakákoliv překážka vadí, nehledě na to, co si myslí autor stránky.
Ještě se mi nestalo, že bych na něčem zoomoval omylem… a že bych pak vinil autora stránky z toho, že mi to nezakázal.

Reaguji na jefitta44:
To je zase vynález. Chci zoomovat, tak mě nech.

Chamurappi:
„Ještě se mi nestalo, že bych na něčem zoomoval omylem… a že bych pak vinil autora stránky z toho, že mi to nezakázal.“

Zato mne sa to stáva pravidelne ;)

Dandys2012:
„Jde nějakému prvku nastavit css vlastnost, aby jeho obsah prohlížeš vůbec nenačetl?“
Iste... Požadovanému prvku nastavíš display: none;.

Dandys2012:
„Konkrétně chci v css pro mobil schovat různé reklamy, videa a pod. co mají spoustu dat.“
Nejlepší bude je tam vůbec nezobrazovat, při načtení stránky detekovat, zda se jedná o mobilní zařízení nebo ne a podle toho se zachovat.

Tomáš123:
„Požadovanému prvku nastavíš display: none;.“
Prohlížeče stahují data, třebas obrázků, i když mají display: none. Svého času se tak, že nestahoval data elementů s display: none; choval prohlížeč Opera, ale i starší Opera 12.xx obrázky s display: none; stahuje.

Dandys2012:
Hudbou budoucnosti je pravděpodobně atribut srcset, už nyní podporovaný některými prohlížeči.

Dandys2012:
„jestli nejseš telefon, tak <div> bla bla bl a </div>“
V CSS existujú podmienky porovnávajúce rozlíšenie:

Dandys2012:
Určite sa dá načítavanie zakázať JavaScriptom. Návod nájdeš napríklad tu.

Reaguji na Dandyse2012:
Nejjistější bude v takovém případě detekovat mobilní prohlížeče pomocí serverového jazyka (např. PHP) a ten div s reklamou jim vůbec neposílat.

Dandys2012:
„To by bylo fajn detekovat v PHP mobil.. ale jak na to?“
http://detectmobilebrowsers.com/