更改视口硬件像素缩放答案

【问题标题】：Change viewport-hardware pixel scaling更改视口硬件像素缩放
【发布时间】：2015-08-15 03:53:33
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html browser screen viewport

【解决方案1】：

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

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

(Physical Screen Width) / X%

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

将此设置更改为 100% 后，我得到浏览器和屏幕像素之间的 1 对 1 对应关系。

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

Does Viewport affect desktop browsers?

How do desktop browsers handle mobile meta tags?

【讨论】：