Веб-контролы и масштабирование текста Windows

23 2

На больших мониторах (особенно с большим 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: размер шрифта, отступы, размеры контейнеров и т.д.

 

Выполняя приведенные выше рекомендации, мы получаем веб-контрол, который будет выглядеть одинаково у большинства сотрудников с бюджетными мониторами, у сотрудников с плохим зрением, включающих масштабирование, и на топовых мониторах.
Буду рад, если кто предложит более правильное и изящное решение.

23
Авторизуйтесь, чтобы оценить материал.
2
Роман Деменков

Отличное решение! 

Стоит добавить, что 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 жизнь портит не слабо... Хороший пример как не надо делать софт=)

Авторизуйтесь, чтобы написать комментарий