我制作了一个响应式网站,可以在不同的屏幕分辨率下正常工作。我使用了三种不同的媒体查询——从 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 的仿真模式下工作正常,但如果我在真正的手机上测试它就不行。
编辑: Woo-hoo...我找到了一种使用 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
值。