I've encountered a dilemma while developing a responsive theme - all the pixels appear doubled on my iPhone, most likely due to its retina display.
My question is, should I create another style sheet (or use media queries) specifically for retina displays by adjusting values based on pixel density?
- All margins are appearing twice as thick
- Borders seem to be double in thickness
- Font sizes are also visibly increased
Currently, all margins, borders, etc. are defined in pixels.
As a temporary solution, I am utilizing the following JavaScript to manage initial scale, which seems to be effective:
(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);
})();
If anyone could provide me with a permanent fix for this issue, I would greatly appreciate it.
Edit:
I'm also using
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />