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?