отображать изображение в натуральную величину, а не только в полный размер?
Я работаю на сайте, где пользователь вводит пару имен, и это отображается красивым шрифтом на шаблоне, чтобы напечатать и проследить позже на что-то другое(бумага,дерево,металл и т. д.).
Предположим, что шаблон имеет размер 4" x 3 " в натуральную величину. Возможно ли отобразить изображение 4" x 3 " на всех устройствах? Полный размер отличается на всех устройствах в зависимости от разрешения указанного устройства. Моя конечная цель - сделать изображение отслеживаемым с экрана вместо печати.Если нужны более подробные сведения, я это сделаю. конечно, обеспечьте то, что необходимо. jquery или kineticjs...
Еще раз спасибо,
Тодд
EDIT: просто для ясности у меня есть изображение размером 4x3 дюйма, которое я хочу отобразить, поэтому, если пользователь измерит свой фактический экран, изображение будет 4x3 дюйма.
2 ответов:
Я сталкивался с этой проблемой раньше, и я боюсь, что это невозможно - сам компьютер часто не будет знать плотность пикселей экрана (он будет знать, сколько пикселей экран, но не обязательно, насколько велика область отображения).
Есть способы обойти это, но вам часто приходится менять свои цели: когда я делал это с картами в прошлом, а не показывал масштаб (1:2500 или что-то еще), я показывал полосу, которая является известным числом пикселей (и я знаю реальное число пикселей). мировой длины).
В вашем случае вы можете заставить пользователя измерить известное количество пикселей на экране, ввести реальный размер и использовать его в качестве масштабного коэффициента при создании изображения.
Не идеально, но я думаю, что это лучшее, что вы можете получить.
Редактировать: другой способ сделать это (который, возможно, лучше, чем заставить пользователя измерить и ввести размер) - позволить ему изменить размер изображения до размера известного реального объекта, который он, вероятно, имеет. вокруг (например, кредитная карточка). После того, как они изменили размер изображения, вы бы знали плотность пикселей и знали бы, какой размер отрисовывать изображение. Это напоминает мне калибровку джойстиков еще в 80-х...
Это невозможно, но есть обходные пути.
Распространенное мнение верно: абсолютные измерения CSS бесполезны, если только ваш браузер намеренно не нарушает рекомендации спецификации.
На экране CSS-дюйм равен 96 пикселям. Все немного усложняется для устройств с сетчаткой и зумом, но вы все равно не можете доверять дюймам. CSS медиа запросы также не помогают. JS / DOM / etc. спецификации могут помочь в некоторых случаях, но, насколько я знаю, никому не удалось ничего построить это касается даже большинства случаев, а тем более всех.
Подробные сведения об абсолютных единицах измерения можно найти в разделе разрешения, переопределение разрешений изображений иабсолютных длин в документах CSS 3 и в более ранних версиях. Но вот краткое изложение:
В исходном CSS дюймы должны были быть дюймами, а пиксели-пикселями, причем между ними не было фиксированного отображения. Но CSS 2.1 добавил предположение, что есть 96 пикселей на дюйм, без изменения определение. Это, очевидно, означает, что пиксели или дюймы не являются реальными (если у вас нет экрана с разрешением 96dpi, которого нет у большинства людей).
CSS 3 указывает, что каждое CSS-устройство должно выбрать, "привязываться" ли к пикселям или к физическим измерениям. Он особенно рекомендует, чтобы устройства с высоким разрешением, такие как печатные носители, привязывались к физическим измерениям, в то время как устройства с низким разрешением, такие как компьютерные экраны, должны привязываться к пикселям. И поэтому " ... физические единицы могут не соответствовать их физическое измерение."(На самом деле, они не будут, за исключением устройств 96dpi.)
Итак, с ноутбуком 112dpi каждый пиксель устройства сопоставляется с одним пикселем CSS, то есть вы получаете .86 CSS дюймов на реальный дюйм.
Как насчет ноутбука 220dpi, например 15-дюймового MacBook Pro Retina? Ну, в OS X пользователь не использует экран 2880x1800 напрямую, а вместо этого выбирает одно из пяти виртуальных разрешений, таких как 1440x900 или 1680x1050 (и под обложками видеокарта фактически рендерит в еще более высокое разрешение и затем уменьшение масштаба до 2880x1800). Итак, как это соотносится? Ну, браузер может либо отображать реальные пиксели 220dpi на 2x2 до 96dpi CSS пикселей, то есть вы получаете .87 CSS-дюймов на дюйм, или он может сопоставить виртуальные пиксели 128dpi на 1x1 с 96dpi CSS-пикселями, что означает, что вы получаете .75 CSS дюймов на дюйм. И вы найдете браузеры, делающие и то, и другое, но постепенно все они приспосабливаются к стандарту, установленному Safari.
Как насчет мобильного устройства 326dpi, например iPhone? Вещи дажеболее осложнены тем, что mobile WebKit построен вокруг tap-to-zoom, поэтому вы обычно не просматриваете вещи в указанных размерах в любом случае. Но самое лучшее, что вы можете получить, - это 4x4 пикселя устройства на пиксель CSS, то есть 1.18 CSS дюймов на дюйм.
CSS 3 медиа-запросы, которые позволяют различать, например, случаи 1:1 и 2:1 (Как 96dpi и 192dpi), но они не позволяют определить фактическое отображение.
Итак, почему CSS имеет все эта сложная функциональность, если она на самом деле не работает? Ну, во-первых, он делает работу для вывода на печать. (В выводе на печать пиксели неверны, поэтому дюймы правильны.) С другой стороны, он поощряет проектирование вещей, основанных на визуальных углах, а не фиксированных размерах-вы действительно не хотите что-то 5" шириной на вашем 5" iPhone, а также 5" шириной на вашем 56" телевизоре, за исключением редких случаев. Но в основном это для обратной совместимости. Как говорит спец, " ... слишком много существующий контент опирается на предположение 96dpi, и нарушение этого предположения нарушает контент."
Я не буду подробно описывать, как вы можете использовать JS для помощи, но основная идея заключается в том, что вы можете получить доступ к таким вещам, как физические размеры экрана, окно которого является единым, и попытаться вычислить, как далеко вы находитесь от 96dpi. Смотрите источник для этой страницы для примера. Но это действительно не работает. Например, у меня есть ноутбук со встроенным экраном 15" 2800x1800/1680x1050 и 21-дюймовый внешний экран 1920х1200. Последние версии Firefox обнаруживает внутренний экран 1680х1050 на 20.6" и внешнего экрана 1920 x 1200 при 20.6". Safari обнаруживает их обоих как 1920х1200 в 23.6". Более старая версия Firefox обнаруживает их как один экран на 3600x1200 при 20.6" (и им пришлось очень много работать, чтобы получить эту неправильную информацию из OS X...).
Есть дополнительные обходные пути, которые вы можете сделать, чтобы обнаружить WebKit, или более старый Firefox, и т.д., и компенсировать известные вещи, которые они получают неверно, что может повысить ваш коэффициент успеха с 1/6 до, возможно, 1/2.
Flash или Java могли бы сделать это лучше... но я не думаю, что стоит встраивать любой из них на страницу только для измерения размера экрана.
Итак, что вы можете с этим поделать?
Первая возможность-использовать PDF вместо HTML. Возможно, вам придется установить диспозицию, чтобы она была открыта в Reader/Preview/etc. вместо встроенного в браузер. И это все еще может не сработать, потому что некоторые пользователи могут иметь Reader / Preview / etc. масштабируется по умолчанию. И даже если это всегда срабатывало, есть много случаев, когда это просто не является приемлемым ответом.
Лучшее чисто веб-решение, которое я видел, это что-то вроде этого:
- Дайте пользователю поле для ввода их фактического DPI.
- включите ссылку "справка", которая показывает информацию о том, как найти/измерить ваш DPI.
- также предлагает интерфейс" калибровки", где вы показываете изображение линейки и позволяете им сжимать/увеличивать ее до тех пор, пока она соответствует линейке, которую они держат над экраном.
- для некоторых устройств (в основном iOS / Android, но также и ноутбуков Mac со встроенным экраном) есть трюки, которые вы можете использовать, чтобы угадать фактический PPI.
- для других устройств также стоит попробовать описанные выше трюки JS.
- В противном случае вернитесь либо к 96, либо к сообщенному значению PPI.
А как насчет будущего?
Эта проблема не совсем секретна. пиксели на дюйм осведомленность и CSS Px обсуждает это (с точки зрения попытки получить точное число пикселей, а не точное число дюймов, но вопросы, очевидно, дополняют друг друга). Между тем, введение в CSS Media Queries - это более практичная статья "Как использовать то, что действительно доступно, не вдаваясь в то, почему это не то, что вы на самом деле хотите. Эти и многие другие статьи указывают на то, какой болью является нынешний дизайн.
Это регулярно появляется на www-стиле список, и аргумент всегда звучит примерно так: в большинстве случаев, когда люди думают, что им нужны физические дюймы, они ошибаются. Подумайте о браузере, предназначенном для использования на другом визуальном расстоянии, например, на телевизоре или iPhone. Так что, даже если бы у нас не было проблем с обратным сравнением, мы все равно хотели бы что-то близкое к тому, что у нас есть. Единственный раз, когда физические дюймы полезны, - это для диаграмм "в натуральную величину".
Но как насчет того, когда вы хотите диаграмму "в натуральную величину"? Ну ... каждый обсуждение, кажется, заканчивается тем, что кто-то говорит: "Если вам действительно это нужно, предложите добавить" физический "блок вместо изменения" в "блок", а затем: "мне действительно это нужно, поэтому я предлагаю добавить "физический " блок", и тогда все заканчивается. Возможно, в конце концов это произойдет, но пока этого не произошло.
Comments