Search code examples
cssmobilemedia-queries

Media query for mobile doesn't wok

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.

Solution

  • 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">