Как я могу отобразить 5 мм сетку в нужном масштабе в веб-браузере?
Я создаю веб-приложение для отображения ЭКГ, которые обычно рисуются в фиксированных масштабах (10 мм / мВ и 25 мм / с) на 5-миллиметровой квадратной сетке. Важно использовать правильный размер, потому что читатели сравнивают то, что они видят на экране, с другими ЭКГ, которые могут существовать только на бумаге.
Наиболее рекомендуемое решение - использовать CSS для стилизации div таким образом, чтобы он имел абсолютные размеры (скажем) 1"на 1", и использовать JavaScript для получения его высоты и ширины (см., Например, Как определить DPI экрана используя PHP или JavaScript). Очевидно, это может сработать, только если браузер знает (или может обнаружить) ответ и может быть обманным путем его раскрыть. Я протестировал этот метод в Linux, Mac OS X и Windows, используя Chrome, Firefox, MSIE, Opera, Safari и браузер Android на устройствах от смартфона (217 dpi) до 19" (108 dpi), 20" и мониторы 30" (101 dpi), и во всех случаях заявленное разрешение составляло 96 dpi. Я пришел к выводу, что этот подход менее точен, чем разбитые часы, если у вас нет монитора с разрешением 96 dpi, и я смотрю для чего-то лучшего.
Я имею в виду просто отобразить прямоугольник с изменяемым размером и попросить пользователя настроить его до известного размера. Кто-нибудь уже сделал это (и если да, то как), или у кого-нибудь есть альтернативное предложение (например, поиск размера экрана в базе данных мониторов)?
Я читал соответствующие обсуждения здесь и в других местах, которые быстро обращаются к причинам, по которым абсолютный размер графики не имеет значения, только количество деталей. Я понимаю, почему это часто так, но в данном случае это не так.
2 ответа
К сожалению, из моего собственного опыта в клиентском проекте, то, что вы предлагаете, является единственным надежным вариантом.
Единственный действительно надежный способ сделать это - попросить пользователя откалибровать размер по объекту фиксированного размера (например, линейке). Мы пробовали несколько других решений, но больше ничего не помогало все время.
Я заставлял пользователей делать это только один раз, когда они регистрировались, так что это не было слишком большой проблемой (система имела относительно небольшое количество пользователей, которые использовали ее много раз).
Что касается того, как у меня был изменяемый размер div, который пользователь должен был откалибровать до 1 см, я сделал так, чтобы пользователь калибровал два разных div таким образом, и подтвердил, что разница в размерах между ними была не больше, чем x (где x является некоторым принятым значение толерантности). Калибровка выполнялась клавишами клавиатуры или перетаскиванием угла div, хотя клавиши клавиатуры обычно обеспечивают лучший результат, многие люди не очень хорошо справляются с мышью, и у нас есть жалобы, благодаря которым ввод с клавиатуры (увеличение / уменьшение размера) решает большинство жалоб. Добавление текстового поля, в котором вы указываете количество пикселей (и видите результат), также может работать.
Internet Explorer 5 для Mac поставляется с ползунком для настройки значения абсолютных единиц CSS в его настройках, даже с советами держать линейку на экране. Мой IE, конечно, всегда был полностью откалиброван.
Это единственный известный мне браузер, который может отображать абсолютные единицы измерения абсолютно.