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

Question

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

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

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

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

缩放前所需

缩放后需要

缩放前的实际值

实际缩放后

标签： javascripthtmlcssuser-interfacezooming

Answer 1

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

border: 0.1px solid black;