Веб-контролы и масштабирование текста Windows
На больших мониторах (особенно с большим PPI) пользователи часто включают масштабирование экрана. Для корректного отображения веб-контролов необходимо учитывать возможные изменения масштаба.
Проблема №1
При включенном масштабировании размеры веб-контрола изменяются непропорционально остальным элементам на форме.
Возьмем карточку размерами 100х100 пикселей, на ней веб-контрол на всю карточку, его размеры 100х100 пикселей. При установленном в Windows масштабе 125% карточка увеличится до 125х125 пикселей, при этом веб-контрол увеличивается сильнее, например, до 150х150 пикселей. Получается, что часть веб-контрола выходит за рамки карточки и не будут видны ни часть содержимого, ни полосы прокрутки. Почему так - надо спросить у разработчиков платформы. Об этом баге сообщал года три назад.
Проблема №2
При включенном масштабировании содержимое веб-контрола не масштабируется. То, что у нас в содержимом веб-контрола нормально выглядело в масштабе 100%, будет выглядеть в 1,5 раза меньше по сравнению с другими элементами формы в масштабе 150%.
Советы по решению этих проблем
1. Необходимо корректировать размер веб-контролов, чтобы он оставался на своем месте.
Для этого лучше всего поместить веб-контрол в элемент типа "Группа", этот элемент корректно масштабируется. В событии показа формы карточки или в самом веб-контроле при его загрузке устанавливаем размер веб-контрола равным размеру родительского элемента типа "Группа".
В событии показа формы карточки
WebControl = Sender.Controls.FindControl("WebControlName")
WebControl.Width = WebControl.Parent.Width
WebControl.Height = WebControl.Parent.Height
JS в самом веб-контроле
window.external.width = window.external.parent.width;
window.external.height = window.external.parent.height;
2. Корректировать размер элементов при масштабировании.
После устранения проблемы №1 размеры веб-контрола и, соответственно, веб-страницы в пикселях всё равно стали больше. Поэтому нельзя задавать фиксированный размер (в px) содержимого в веб-контроле, иначе он будет занимать не весь веб-контрол и всё будет слишком мелким.
Например, установленный в веб-контроле размер шрифта 11px (это приблизительный размер шрифта на форме Directum при масштабе 100%) при включенном масштабировании уже будет меньше размера остального текста на форме. Решений тут может быть несколько, я выбираю использование единиц REM.
Единица rem задаёт размер относительно размера шрифта элемента <html>.
В сам веб-контрол помещаю код, который изменяет "опорный" размер шрифта у HTML пропорционально увеличению размера веб-контрола при масштабировании.
window.onload = function() {
document.documentElement.style.fontSize = window.external.width / '<ширина веб-контрола при масштабе 100%>' * 11 + 'px';
};
Далее в css все абсолютные размеры указываю в REM: размер шрифта, отступы, размеры контейнеров и т.д.
Выполняя приведенные выше рекомендации, мы получаем веб-контрол, который будет выглядеть одинаково у большинства сотрудников с бюджетными мониторами, у сотрудников с плохим зрением, включающих масштабирование, и на топовых мониторах.
Буду рад, если кто предложит более правильное и изящное решение.
Отличное решение!
Стоит добавить, что rem имеет ограничения и не будет работать (например в Windows XP): http://caniuse.com/rem/embed/
Необходимо подключать различные polyfill библиотеки, например http://chuckcarpenter.github.io/REM-unit-polyfill/
Роман, да, IE - это наказание для всех веб-разработчиков... Но я бы не стал при разработке учитывать старые версии, если они уже не поддерживаются. Работоспособность на них по умолчанию закладывать не надо, только по запросу. С версии directum 5.3 версия ie должна быть >=10. Кстати, такое же ограничение у библиотеки download.js, которая нужна для замены сервера обработки гиперссылок на локальную обработку. В общем этот IE жизнь портит не слабо... Хороший пример как не надо делать софт=)
Авторизуйтесь, чтобы написать комментарий