Question

if (window.matchMedia("(min-width: 320px)").matches) {
    alert("width 320"); // works
}
if (window.matchMedia("(min-width: 768px)").matches) {
    alert("width 768");
}
if (window.matchMedia("(min-resolution: 2.4dppx)").matches) {
    alert("2.4dppx");
} 
if (window.matchMedia("(min-resolution: 217dpi)").matches) {
    dpi = 217;
} 
if (window.matchMedia("(min-resolution: 252dpi)").matches) {
    dpi = 252;
} 
if (window.matchMedia("(min-resolution: 331dpi)").matches) {
    dpi = 331;
} 
if (window.matchMedia("(min-resolution: 332dpi)").matches) {
    dpi = 332;
    }

I'm testing on Lumia 920 and only width 320 works, none other, I want to know the DPI. Tried everything, its just min-resolution that doesn't work.

Was it helpful?

Solution

I think this is because you have only min-width defined. if you are searching for min-width:320px - this query is met always - even you have bigger resolution. Try something like

if (window.matchMedia("(min-width: 320px) and (max-width: 767)").matches) {
    alert("width 320"); // works
}//one px less then the query in next statement
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top