Media query for mobile doesn't wok

0
votes

Hei I have an mvc page that have some css for ipad and for mobile.

The query for ipad(@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) ) works fine, but i can't get the query for mobile to work. I've tried this:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)

and this:

@media only screen and (min-device-width : 320px) and (max-device-width : 767px)

and this:

@media only screen and (max-device-width : 767px)

My meta looks like that:

<meta name="viewport" content="width=device-width,initial-scale=1" />

Tested on HTC ONE and iphone 4.

2
cssmobilemedia-queries
Don't include 'max device' make it so your queries look like this @media (max-width: 767px) EDIT: or min-device for that matter - Andrew Matthew
Try with @media only screen and (max-width: 767px) without the max-device-width once - mohamedrias
max-width didn't work - Margo

2 Answers

1
votes

I've ended up putting the mobile section into separate file and having the query in link tag, this worked.

<link rel="stylesheet" media="only screen and (min-device-width: 768px)" href="Content/Site.css">
    <link rel="stylesheet" media="only screen and (max-device-width: 767px)" href="Content/mobile.css">
0
votes

Try this:

@media only screen and (max-width: 767px)

I know that max-device-width is used to target mobile devices such as iphone and android. But sometimes it's not recognized properly. So better use max-width without the device in it.