javascript - 更改视口(viewport)硬件像素缩放

Question

如何使浏览器(chrome 44.0.2403.155 m)内容的像素与物理屏幕(笔记本电脑)的像素一致？

我对前端开发完全陌生，在花费数小时生成特定大小(以像素为单位)的图像后，我痛苦地发现浏览器屏幕中的(虚拟？)像素与我的物理像素不一致屏幕硬件。有很多关于响应式设计的 Material ，但在我所做的事情中没有考虑用户体验。我需要的是浏览器中的像素与屏幕上的像素一致。

我都尝试过 <meta name="viewport" content="width=1920"> (1920px是我的屏幕宽度)和 <meta name="viewport" content="width=device-width, initial-scale=1.0">但我没有看到任何变化，即使我使用这些数字也没有看到任何变化(此视口(viewport)元标记仅适用于移动设备吗？)。我还了解到存在 window.screen对象和那个window.screen.height和window.screen.width但它们是只读的。

Answer 1

尝试了很多事情后我找到了答案:我的浏览器像素和物理屏幕像素之间没有 1:1 比例的原因是我的 Windows 10 设置为缩放所有内容:

采用此 X% 设置，浏览器将其屏幕宽度设置为

(物理屏幕宽度)/X%

就我而言，即1920px/150% = 1280px

将此设置更改为 100% 后，我在浏览器和屏幕像素之间获得一一对应。

我还在 StackOverflow 中发现视口(viewport)元标记不会影响非移动(台式机、笔记本电脑等)设备浏览器。不过，我希望我能在官方文档中找到这个答案。

Does Viewport affect desktop browsers?

How do desktop browsers handle mobile meta tags?