Search code examples
htmlcssresponsive-designmedia-queries

CSS Media query not working correctly

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.

Solution

  • 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