CSS pixel doubling on iPhone

CSS pixel doubling on iPhone

I'm developing a responsive theme and the issue is all of the pixels are
doubled in iPhone. I believe this is due to a retina display.
My question is do I have to create an another style sheet ( or using media
queries) by giving special values for retina only displays (dividing
actual pixel size in pixel density)?
All of the margins are doubled
Border thickness is doubled
Font size is doubled
Currently I have all the margins, borders ..etc. in pixels.
For now, I'm using following java-script to control initial scale and it's
working fine.
(function() {
var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
var content = 'initial-scale=';
content += 1 / window.devicePixelRatio;
content += ',user-scalable=no';
meta.setAttribute('content', content);
document.getElementsByTagName('head')[0].appendChild(meta);
})();
Can some one please tell me a solution for this?