Får ej @media att trigga

8 svar · 1 129 visningar · startad av Wibbskii 13 okt. 2015

WibbskiiMedlem sedan okt. 201438 inlägg

Frågan13 okt. 2015 06:09#1

Jag har ett problem med @media
Jag har gjort 2 @media queries

@media screen and (max-device-width: 480px) and (orientation: portrait) {
	.no-mobile {
		display: none;
	}
}
@media screen and (max-device-width: 750px) and (orientation: landscape){
	.no-mobile {
		display: none;
	}
}

När jag testar dom i Google Chrome's mobil simulering får jag dom bägge att trigga. I ios får jag den första att trigga men inte i den andra. I android triggar ingen.
Jag har gjort 2 klasser för att testa

<div class="no-mobile">desktop</div>
<div class="on-mobile">Mobil</div>

Och dessa har jag slängt in på en utvecklingsite http://dev.ctc.se/

Vad gör jag för fel?

voigtann1Medlem sedan juni 20019 519 inlägg

13 okt. 2015 14:16#2

båda klasserna i din CSS är ju .no-mobile är det rätt tänkt?

WibbskiiMedlem sedan okt. 201438 inlägg

14 okt. 2015 09:49#3

Ja för jag har inte gjort några klasser för on-mobile än.
Jag vill att div no-mobile skall döljas när man tittar i mobil.

Inget förslag?

metalboyMedlem sedan jan. 2005953 inlägg

14 okt. 2015 09:58#4

Jag testade att gå in på sidan med en Samsung Galaxy S6, både Chrome och androids Internet-browser, och texten "desktop" syns inte. Det verkar alltså fungera enligt i önskemål i android?

WibbskiiMedlem sedan okt. 201438 inlägg

14 okt. 2015 11:59#5

Tack för info.
Om du lägger telefonen i landscape, är även då desktop borta?

metalboyMedlem sedan jan. 2005953 inlägg

14 okt. 2015 12:42#6

Wibbskii skrev:

Tack för info.
Om du lägger telefonen i landscape, är även då desktop borta?

Svar: Ja

WibbskiiMedlem sedan okt. 201438 inlägg

15 okt. 2015 05:45#7

Tack för info.
Bara för mig att fortsätta felsöka varför det inte fungerar på ios då.

WibbskiiMedlem sedan okt. 201438 inlägg

15 okt. 2015 06:44#8

Kan det krocka om man har flera @media med samma inställningar?
Tex.

@media (max-width: 667px) {
	.klass1{...}
}
@media (max-width: 667px) {
	.klass2 {...}
}

WibbskiiMedlem sedan okt. 201438 inlägg

15 okt. 2015 07:46#9

Fick rätt på det nu. Tror jag har en krock någonstans i min css fil. Bara att gå genom alla 5000 rader :P