css - 如何覆盖设备像素比

Question

我制作了一个响应式网站，它可以在不同的屏幕分辨率下正常工作。我使用三种不同的媒体查询——从 0 到 640，从 640 到 960 及以上。无论如何，如果我尝试在使用 720x1280 的三星 Galaxy Note2 上打开，因为它的像素比为 2，它会将网站读取为 360x640 设备，但具有 640-960 样式。

我如何确定网站将以原始分辨率显示？

我在标题中包含了这个:

<meta name="viewport" content="width=720, initial-scale=1, maximum-scale=1, user-scalable=no" />

如果我在样式表文件中添加这样的内容

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
@viewport {
     max-zoom:50%;
     width:720px;
}
}

它在 Chrome 的仿真模式下工作正常，但如果我在真实的移动设备上测试它就不行了。

编辑:哇哦...我找到了一种使用 JavaScript 来做到这一点的方法。

document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio)+', maximum-scale=1.0, user-scalable=0');

它读取设备像素比，然后设置 initial-scale 值。

Answer 1

我还没有测试过这个，但尝试改变:

<meta name="viewport" content="width=720, initial-scale=1, maximum-scale=1, user-scalable=no" />

到

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

将宽度设置为 720 可以解释为什么要应用 640-960 样式。