如何在网络浏览器中以适当的比例显示5mm的网格？ [英] How can I display a 5mm grid at the proper scale in a web browser?

问题描述

我正在创建一个用于显示ECG的网络应用程序，通常按固定比例（10 mm / mV和25 mm / s）在5mm正方形网格上绘制ECG。使用正确的大小非常重要，因为读者会将他们在屏幕上看到的内容与可能仅存在于纸上的其他ECG进行比较。

I'm creating a web application for displaying ECGs, which are conventionally drawn at fixed scales (10 mm/mV and 25 mm/s) on a 5mm square grid. It's important to use the correct size, because readers compare what they see on-screen with other ECGs that may exist only on paper.

最推荐的解决方案是使用CSS设置div的样式，使其具有（例如）1乘1的绝对尺寸，并使用JavaScript获取其高度和宽度
（例如，参见如何使用PHP或JavaScript检测屏幕DPI ）。显然，
仅在浏览器知道（或可以发现）答案并且可以被欺骗
揭示答案时才有效。我在Linux，Mac OS X和Windows上使用Chrome，
Firefox，MSIE，Opera，Safari和Android浏览器在从智能
手机（217 dpi）到19的设备上测试了此方法（108 dpi），20和30（101 dpi）显示器，并且在所有情况下报告的分辨率均为96 dpi。我的结论是，除非您碰巧遇到这种情况，否则这种方法的准确性不如
a损坏的手表。拥有96 dpi的显示器，我正在寻找更好的
。

The most recommended solution is to use CSS to style a div such that it has absolute dimensions of (say) 1" by 1", and to use JavaScript to obtain its height and width (see, for example, How to detect the screen DPI using PHP or JavaScript). Obviously, this can work only if the browser knows (or can discover) the answer and can be tricked into revealing it. I tested this method on Linux, Mac OS X, and Windows, using Chrome, Firefox, MSIE, Opera, Safari, and the Android browser on devices ranging from a smart phone (217 dpi) to 19" (108 dpi), 20", and 30" (101 dpi) monitors, and in all cases the reported resolution was 96 dpi. My conclusion is that this approach is less accurate than a broken watch, unless you happen to have a 96 dpi monitor, and I'm looking for something better.

我正在考虑仅显示可调整大小的矩形并要求用户进行调整它的大小为已知的
a。是否有人已经这样做（如果这样做，如何做），或者有人有
的替代建议（例如在监视器数据库中查找屏幕大小）？

I'm thinking of just displaying a resizable rectangle and asking the user to adjust it to a known size. Has anyone already done this (and if so, how), or does anyone have an alternative suggestion (such as looking up the screen size in a database of monitors)?

我在这里和其他地方都读过相关讨论，这些讨论很快就变成了图形绝对大小无关紧要的原因，而只是细节的数量。我明白为什么
这通常是正确的，但在这种情况下并非如此。

I have read related discussions here and elsewhere that quickly turn to the reasons why the absolute size of graphics doesn't matter, only the amount of detail. I understand why this is often true, but it is not so in this case.

推荐答案

不幸的是，根据我在客户端项目上的经验，您建议的是唯一可靠的选择。

Sadly, out of my own experience on a client project, what you suggest is the only reliable option.

执行此操作的唯一真正可靠的方法是要求用户针对固定大小的对象（例如标尺）校准大小。我们已经尝试了其他几种解决方案，但是一直没有其他解决办法。

The only truly reliable way to do this is to ask the user to calibrate the size against an object of fixed size (a ruler for example). We've tried several other solutions but nothing else worked all of the time.

我让用户在注册时只做一次，所以麻烦不大（系统使用过很多次系统的用户数量相对较少）。

I made users only do it once when they registered so it was not too big of a hassle (the system had a relatively low number of users who used it a lot of times).

关于方式，我有一个可调整大小的div，用户必须对其进行校准1厘米，我已使用户以这种方式校准两个不同的div，并验证了它们之间的尺寸差不大于x（其中x是公差的某个可接受值）。校准是通过键盘键或拖动div角完成的，尽管键盘键通常可以提供更好的结果，但是很多人对鼠标的感觉并不好，我们也收到了抱怨，允许键盘输入（增大/减小大小）解决了大多数抱怨。在您指定像素数量（并查看结果）的地方添加文本框也可能有效。

As for how, I had a resizeable div which the user had to calibrate to 1cm, I've made the user calibrate two different divs this way and validated that the difference in size between them was not bigger than x (where x is some accepted value of tolerance). Calibration was done with keyboard keys or dragging the div corner although keyboard keys usually provide better result a lot of people are not that good with a mouse and we got complaints, allowing keyboard input (increase/decrease size) solved most of the complaints. Adding a text box where you specify an amount of pixels (and see the result) might also work.

这篇关于如何在网络浏览器中以适当的比例显示5mm的网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！