How to manipulate browser pixels on different mobile devices

Question

I'm creating a board game using HTML5, CSS3 and JavaScript. It's working fine on Desktop browsers properly. But when i load it on Windows phone it's not behaving properly. The resolutions and the game board are not matching. I'm targeting Windows and Android platform.

Game Board is 1050x650 px which is implemented using HTML and css3. now what i want to know is most browsers don't support certain CSS3 features like rotations and key-frames animations so will it be better if i use photoshop to make the board for different resolutions or is it possible to do the same as i did using HTML5 and CSS3.

And in the above image, let's say distance between B and a red dot is 200px and i use JS to manipulate the movement of B from one point(red dot) to another point(red dot), now will the distance 200px be the same in all the devices? If not how to write a proper code to manipulate the movement in all mobile devices?

Answer 1

If you'd like your game board to appear sharp, with lines of 1px width, at different resolutions, then you may be better off drawing your game board in the SVG vector format, using a tool like Inkscape or Illustrator.

SVG files do have a nominal pixel resolution, as defined by the viewBox attribute of the SVG tag. This makes calculation of the positions of the dots and lines easier when creating the SVG. However, the SVG file can then be scaled using CSS e.g. to 100% of the body width, with no loss of sharpness.

Additionally, because SVG is an XML format, the elements within an SVG definition can be animated using CSS if required. Better still, the animations can be specified using the nominal pixel dimensions of the SVG file. So, your "B" element could be defined in SVG, and if the horizontal distance between the red dots is a nominal 200px, then your animations can be defined in terms of this distance. The CSS scaling will then also apply to the animation automatically.

Have a look at http://css-tricks.com/animating-svg-css/, particularly at the translateY animation of the dinosaur(!) which is defined in nominal SVG pixels. I can confirm that, if I use CSS to scale the SVG e.g. to 50% of its original width, then not only is the dinosaur 50% smaller, but it also moves 50% as far.