Autor | Zpráva | ||
---|---|---|---|
Dandys2012 Profil * |
#1 · Zasláno: 25. 8. 2014, 10:37:38
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 |
#2 · Zasláno: 25. 8. 2014, 10:53:45
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; } } |
||
Dandys2012 Profil * |
#3 · Zasláno: 25. 8. 2014, 11:04:12 · Upravil/a: Dandys2012
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 |
#4 · Zasláno: 25. 8. 2014, 11:13:45
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 * |
#5 · Zasláno: 25. 8. 2014, 11:17:09 · Upravil/a: Dandys2012
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 |
#6 · Zasláno: 25. 8. 2014, 12:05:01
Dandys2012:
To sa stáva aj mne :-) |
||
jefitto44 Profil |
#7 · Zasláno: 25. 8. 2014, 12:44:45
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 |
#8 · Zasláno: 25. 8. 2014, 12:46:46
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 |
#9 · Zasláno: 25. 8. 2014, 12:53:55
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 |
#10 · Zasláno: 25. 8. 2014, 13:15:56
<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 |
#11 · Zasláno: 25. 8. 2014, 13:24:17
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 |
#12 · Zasláno: 25. 8. 2014, 13:32:49
Reaguji na jefitta44:
To je zase vynález. Chci zoomovat, tak mě nech. |
||
jefitto44 Profil |
#13 · Zasláno: 26. 8. 2014, 07:32:55
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 ;) |
||
Časová prodleva: 5 dní
|
|||
Dandys2012 Profil * |
#14 · Zasláno: 30. 8. 2014, 21:35:52 · Upravil/a: Dandys2012
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 |
#15 · Zasláno: 31. 8. 2014, 09:50:47
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 |
#16 · Zasláno: 31. 8. 2014, 10:10:13
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 * |
#18 · Zasláno: 1. 9. 2014, 19:00:25
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 |
#19 · Zasláno: 1. 9. 2014, 19:20:02
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 * |
#20 · Zasláno: 1. 9. 2014, 21:34:53
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 |
#22 · Zasláno: 3. 9. 2014, 18:28:51
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 * |
#23 · Zasláno: 5. 9. 2014, 23:51:03
To by bylo fajn detekovat v PHP mobil.. ale jak na to?
|
||
weroro Profil |
#24 · Zasláno: 6. 9. 2014, 01:12:20
Dandys2012:
„To by bylo fajn detekovat v PHP mobil.. ale jak na to?“ http://detectmobilebrowsers.com/ |
||
Časová prodleva: 10 let
|
0