如何在缩放时保持 div 边框大小相同

Question

我遇到了一个适用于 Android 和 iOS 的应用程序，它具有一个微妙但非常简洁的功能：无论缩放级别如何，网格边框的大小在缩放前后都保持不变。当用户缩放时，单元格会自行缩放以占据屏幕的更大部分。但边框没有——它们仍然是一条很好的细线。这对于需要精细控制（如绘图）的应用程序很重要。

我天真地尝试使用 html div、css 和 javascript 为 Web 实现类似的网格。我预计问题将是使用其中一个视口大小单位（vh 或 vw）的简单问题。除非我做错了什么，否则这不是一个有效的解决方案。取而代之的是，浏览器似乎在缩放 100% 时测量视口有多大，并在此基础上固定相对单位。放大后，您可以确定那些细小的线条会变得更大，这使得实现精细 div 交互的目标变得困难且没有吸引力。

我宁愿避免重新实现，因为我为我的网络应用程序编写的代码已经相当长了，并且在减去上述问题后可以正常工作。不过，我对任何涉及库或标准 Web api 功能的解决方案持开放态度。尽管像 paper.js 这样的矢量绘图库显然也不允许这种事情。我遇到了可能与此有关的其他问题 (How to detect page zoom level in all modern browsers?)，但我不确定如何继续。关于保持恒定大小的 div，我似乎也有类似的问题。即使问这个问题也很困难，因为可以证明 vh 和 vw 单位应该按照我刚刚概述的方式运行（视口考虑当前缩放而不是初始缩放）。如果他们不这样做，可以进一步证明 CSS 单元应该以这种方式运行。

所以。最后：能做到吗？是否可以制作不使用 Flash 的网页来实现手机应用程序在缩放用户界面方面可以实现的功能？如果有人愿意，我可以包含生成网格的代码，但这在很大程度上是无关紧要的。这似乎都归结为 div 边框周围的 css，这是 javascript 中的单行，它构成了网格。 0.1vw solid black 或 1px solid black 产生类似的结果。

缩放前需要

缩放后需要

缩放前的实际值

之后的实际缩放

Answer 1

将边框宽度设置为较小的值，例如 0.1px

border: 0.1px solid black;