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.
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