Another problem I ran into when building my first mobile game (using HTML, CSS and JS) was that while testing it on my phone I found my graphics were all blurred. Quite obvious that it was because my phone has a high pixel density screen as many do now. However, my graphics are pretty much all applied as CSS background images and I had not had to deal with this issue before in anything other than images. A Google search and Stack Overflow provided the answers I needed though.
Firstly I needed to increase the size of my images, luckily this was easy as for my game they are deliberately pixelated images. Therefore in GIMP2 (which I use for all my graphics) I just had to select Image > Scale Image. This opens the Scale Image popup which I doubled the size on and most importantly selected "None" for Interpolation which made them very clean when scaled up. (Note that this was the case because my images were deliberately pixelated, other styles might not work so well with this).
To set the background image for higher pixel density devices I just used media queries. The media query I used is below and I found on StackOverflow (http://stackoverflow.com/questions/16154494/retina-displays-high-res-bac...). Then I just set the background-image to use the larger image and set the "background-size" so that it displays at the size required. And that's it, problem sorted and crisp clear graphics displayed on my phone.
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
.toy-ball{
background:url("../img/toy_ball@2x.png") no-repeat top left;
background-size: 45px 90px;
}
}