css - 如何覆盖设备像素比率

我做了一个响应式网站，可以在不同的屏幕分辨率下正常工作。我使用三种不同的媒体查询-从0到640，从640到960及以上。无论如何，如果我尝试在使用720x1280的Samsung 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值。

最佳答案

我尚未对此进行测试，但是请尝试更改:

<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样式。