Media Query detection on windows mobile
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.
Answers
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