Reputation: 718
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.
Upvotes: 1
Views: 2690
Reputation: 129
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
Upvotes: 2