iPhone上的CSS像素加倍

Question

我正在开发一个响应式主题，但问题是 iPhone 上的所有像素都翻了一番。 我相信这是由于视网膜显示器造成的。

我的问题是我是否必须通过为仅视网膜显示器（实际像素大小除以像素密度）提供特殊值来创建另一个样式表（或使用媒体查询）？

• 所有的边距都加倍
• 边框厚度加倍
• 字体大小加倍

目前我拥有所有的边距、边框等。以像素为单位。

目前，我正在使用以下 java-script 来控制初始比例，并且工作正常。

(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);
})();

谁能告诉我解决方法？

编辑：

我也在使用<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />。

Answer 1

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 是您要查找的内容，请将其与媒体查询结合使用。