I'm styling my website and I would like it to retina display friendly, for this I was planning to use media queries for high dpi displays, however I don't think that media query is working, as when I view browser generate code on my retina macbook, I can see that body still has default css, instead of one in the media query. Why is that? Is there anything additional I need to add to it? Note both default css and media queries are in the same css file, However I don't think that is the issue.
/* ==========================================================================
Theme Style
========================================================================== */
body {
background-color: #ebebeb;
/* background-image: url("../images/bg.png"); */
background-image: url("http://bit.ly/Z1zQeb");
}
/* ==========================================================================
Media Queries
========================================================================== */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* background-image: url("../images/[email protected]"); */
background-image: url("http://bit.ly/ZgBQ4c");
background-size: 147px 147px;
}
EDIT: I'm also getting this error in console: INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value.
You haven't specified a tag to apply the styles to. Try this.
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
body {
/* background-image: url("../images/[email protected]"); */
background-image: url("http://bit.ly/ZgBQ4c");
background-size: 147px 147px;
}
}