Autor Zpráva
Dandys2012
Profil *
Ahoj.
Pořád tomu nemůžu přijít na kloub:

Potřebuju předhodit jedny styly pro mobil (resp. vše, co má obrazovku menší než 800 px) a jedny styly pro PC.
Zkusil jsem tohle:

<link rel="stylesheet" type="text/css" media="screen and (min-width: 801px)" href="1.css">

<link rel="stylesheet" type="text/css" media="screen and (min-width: 100px) and (max-width: 800px)" href="2.css">

jenže mi to prostě pokaždé a vždy a na všech zařízeních zobrazuje styly 1.css.

Poradíte někdo prosím?
Tomáš123
Profil
Dandys2012:
Aj keď pochybujem, že by práve toto by mohlo spôsobovať problém, skús kód upraviť takto:
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 801px)" href="1.css">

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:
@media screen and (min-width: 801px) { /*resp.: @media screen and (min-width: 100px) and (max-width: 800px)*/ 
  element {
    vlastnosti: hodnoty;
  }
}
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
Profil *
Tak jsem udělal toto:


@media screen and (min-width: 801px) 
{
   h1 {color:red;}
}
@media screen and (max-width: 800px) 
{
   h1 {color:green;}
}

a na mobilu na androindu je prostě h1 pořád červený... jsem z toho hloupej


only jsem zkoušel taky a nic to nezměnilo
Tomáš123
Profil
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
Profil *
ok.. ukazka bude nejrozumnější: http://kamionaci.com


Z nějakýho důvodu to začalo fungovat, aniž bych něco změnil.. nechápu..
Tomáš123
Profil
Dandys2012:
To sa stáva aj mne :-)
jefitto44
Profil
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
}
Chamurappi
Profil
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.
Tomáš123
Profil
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 :-).
jefitto44
Profil
<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...
Chamurappi
Profil
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.
Fisir
Profil
Reaguji na jefitta44:
To je zase vynález. Chci zoomovat, tak mě nech.
jefitto44
Profil
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
Profil *
Všem díky a mám tu ještě jeden dotaz:

Jde nějakému prvku nastavit css vlastnost, aby jeho obsah prohlížeš vůbec nenačetl?

Konkrétně chci v css pro mobil schovat různé reklamy, videa a pod. co mají spoustu dat.


Popř. jak na to vyzrát, pokud to nejde v css?
Tomáš123
Profil
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;.
joe
Profil
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.
Bubák
Profil
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
Profil *
joe: Ale nerad bych dělal dvě celý verze. Rád bych uvnitř programu dal podmínku:

jestli nejseš telefon, tak <div> bla bla bl a </div>

Dá se to udělat?
Tomáš123
Profil
Dandys2012:
jestli nejseš telefon, tak <div> bla bla bl a </div>
V CSS existujú podmienky porovnávajúce rozlíšenie:
@media screen and (max-width: šírka, do ktorej nechceš zobrazovať obsah) {
  .nejaky-div {
    display: none;
  }
}
Dandys2012
Profil *
Jo, ale to je právě v CSS..

jenže co když mam div s reklamou. To v css nevypnu. display: none jsem tam dal dočasně, ale načítá data uvnitř a to si nemůžu dovolit.
Tomáš123
Profil
Dandys2012:
Určite sa dá načítavanie zakázať JavaScriptom. Návod nájdeš napríklad tu.
Fisir
Profil
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
Profil *
To by bylo fajn detekovat v PHP mobil.. ale jak na to?
weroro
Profil
Dandys2012:
To by bylo fajn detekovat v PHP mobil.. ale jak na to?
http://detectmobilebrowsers.com/

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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