如何在缩放

Question

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

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

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

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

缩放前所需

缩放后需要

缩放前的实际值

实际变焦

Answer 1

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

border: 0.1px solid black;