CSS Media query not working correctly

Question

In an application am using media query to make page mobile friendly and responsive. Doc type Used

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Included meta tags in header

<meta name="HandheldFriendly" content="true" />
        <meta name="viewport" content="width=device-width;user-scalable=no" />

Included CSS

<link rel="stylesheet" type="text/css"  href="MBE-MOBILE.css" th:href="@{'MBE-MOBILE.css.css'}"/>

Media Queries Used

@media screen  and (min-width:300px)  { 
    .heading-text{
        font-size: 20px;
        color:red;
    }
}

@media screen  and (min-width:480px) { 
    .heading-text{
        font-size: 30px;
        color:green;
    }
}

@media screen  and (min-width:640px) { 
    .heading-text{
        font-size: 35px;
        color:blue;
    }
}

In web browser this is working fine.But in some mobile browsers the media query is not working correctly.

EG: for Sony Experia which has a resolution 1080 x 1920 pixels the browser taking min-width 320 instead of 640 px.

Can any body guide me the exact usage of media query for solving this.Any Help will be appreciated.

Check out @ http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ — msg, May 26 '14 at 13:00

score 2 · Accepted Answer · edited May 23 '17 at 11:53

Depends on your Sony Xperia, really.

This is a related question. Considering it as an Xperia Z or Z1, you can use:

@media screen and (-webkit-device-pixel-ratio:3) {styles}

Think of newer iPhones, they have a CSS Pixel Ratio of 2, so their width is actually 640px, but using initial-scale=1.0 we target it by using 320px. A Xperia Z or Z1 would have 1080/3, which means it is target by a @media screen for 360px.

EDIT: You can use comma-separated lists of media queries, so even with your media query for 640 px in place, you can include the other:

@media screen and (min-width:640px), screen and (-webkit-device-pixel-ratio: 3) {styles}

This allows you to keep the the initial-scale and even supports Nexus tablets with 1920 px resolution and pixel-ratio 3

@Philip Gruneich Is there any general way to solve this with out using webkit-device-pixel-ratio . I have removed initial-scale. — SHANib, May 26 '14 at 12:53

CSS Media query not working correctly

1 Answers1