如何覆盖设备像素比

问题描述

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

I made a responsive website which works fine with different screen resolutions. I use three different media queries - from 0 to 640, from 640 to 960 and above. Anyway if I try to open on my Samsung Galaxy Note2 which uses 720x1280, since it has pixel ratio 2, it reads the website as 360x640 device, but with 640-960 styles.

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

How can I be sure that the website will be displayed in original resolution?

我将其包含在标题中:

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

如果我在我的样式表文件中添加这样的东西

If I add something like this in my stylesheet file

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

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

It works OK in Chrome's Emulation Mode, but not if I test it on the real mobile.

呜呜……我找到了一种用 JavaScript 做到这一点的方法.

Woo-hoo... I found a way to do that with 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值.

It reads device pixel ratio and then sets the initial-scale value.

推荐答案

我还没有测试过，但尝试更改:

I haven't tested this, but try changing:

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

Setting the width to 720 would explain why your 640-960 styles are being applied.

这篇关于如何覆盖设备像素比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！