本文介绍了如何覆盖设备像素比率的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我制作了一个自适应网站,可以在不同的屏幕分辨率下正常工作。我使用三种不同的媒体查询-从0到640,从640到960及更高版本。无论如何,如果我尝试在使用720x1280的Samsung 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');

读取设备像素比率,然后设置初始比例值。

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.

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

07-04 23:54