将视口设置为匹配物理像素

Question

将视口设置为匹配物理像素

3

我想让视口完全匹配屏幕上的物理像素。

我正在处理的页面的HTML代码（由于其他使用相同HTML的元素可能会出现问题，因此无法更改）包括：

<meta name=viewport content="width=device-width, initial-scale=1">

我该如何在javascript中使视口匹配物理像素？

- usernumber

1

什么是物理像素？ - Ashvin777

@Ashvin777...屏幕上的那些？我可以用放大镜数出他们。 - usernumber

你可以直接在viewport中设置固定宽度 - content="width=100;" - Ashvin777

@Ashvin777 那不会只是把视口设置为100吗？ - usernumber

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Bokan · Accepted Answer

你想要做的是将布局放入一个更大的视口中，然后缩小页面直到它适应屏幕。 window.devicePixelRatio 是在 scale=1 时每个 CSS 像素对应的物理像素数。

我们首先调整页面流动的布局宽度。由于 width=device-width 是设备视口宽度（以 CSS 像素表示），你需要将其乘以 window.devicePixelRatio，这样它就是设备视口在物理像素上的宽度。不幸的是，没有关键字可以实现这一点，所以你必须通过 JS 来完成。

// Assuming <html> has `width: 100%`.
var width = document.documentElement.clientWidth * window.devicePixelRatio;
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=' + width + ', minimum-scale= 1');

然而，现在您的页面比设备视口更宽。您可能可以应用正确的viewport-meta缩放属性将其缩小，但我建议使用CSS transforms，因为它们更具互操作性，并且比viewport meta更少有怪癖，这样在各种浏览器上都能更好地工作。在这种情况下，您现在需要通过设备像素比进行页面缩小，即除以设备像素比。

document.documentElement.style.transform = `scale(${1 / window.devicePixelRatio})`;
document.documentElement.style.transformOrigin = 'top left';

这将缩小您的内容，使得1个CSS像素等于1个物理像素。