Question

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

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

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

目前我有所有的边距，边界..等。以像素为单位。

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

(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">正是您所寻找的，将其与媒体查询相结合。

iPhone上的CSS像素倍增

1 个答案: