Почему мобильное приложение 1С не адаптирует HTML-страницу под размер экрана?

При разработке мобильных решений на платформе 1С мы часто сталкиваемся с тем, что верстка, идеально отображаемая в настольном браузере, ведет себя непредсказуемо внутри элемента ПолеHTMLДокумента. Основная проблема заключается в том, что ПолеHTMLДокумента в мобильной платформе использует системный компонент WebView (на Android это WebView, на iOS — WKWebView). Эти компоненты имеют свои правила рендеринга, которые могут игнорировать стандартный мета-тег viewport.

Давайте вместе разберем, как принудительно заставить содержимое адаптироваться под доступную ширину контейнера.

Шаг 1: Подготовка контейнера при инициализации

Одной из частых причин некорректного отображения является попытка загрузки контента до того, как ПолеHTMLДокумента полностью определило свои физические размеры в интерфейсе приложения. Рассмотрим метод «пустой загрузки», который помогает инициализировать движок рендеринга.

Суть подхода заключается в том, чтобы сначала отобразить пустую страницу, дождаться завершения отрисовки, а затем программно внедрить нужные данные. Это позволяет мобильному движку зафиксировать корректные границы области отображения.

Шаг 2: Использование JavaScript для управления размерами

Так как ПолеHTMLДокумента позволяет нам взаимодействовать с содержимым через Документ.parentWindow.eval(), мы можем динамически корректировать масштаб страницы уже после её загрузки.

Рассмотрим пример кода, который помогает «подтолкнуть» движок к правильному перерасчету:

// Пример выполнения JS кода после загрузки страницы в 1С
Скрипт = "
    var style = document.createElement('style');
    style.innerHTML = 'img { max-width: 100% !important; height: auto !important; }';
    document.head.appendChild(style);
    
    // Принудительный вызов перерисовки
    document.body.style.display = 'none';
    document.body.offsetHeight;
    document.body.style.display = 'block';
";
Элементы.ПолеHTML.Документ.parentWindow.eval(Скрипт);

Этот код вставляет CSS-стили, которые гарантируют, что изображения не будут выходить за пределы родительского элемента, и выполняет «переключение» видимости body, что заставляет WebView заново рассчитать геометрию элементов.

Шаг 3: Настройка CSS для адаптивной верстки

Даже при правильном использовании viewport, мобильные компоненты могут требовать от нас более строгих правил в CSS. Проанализируем типичные ошибки:

1. Использование фиксированных значений в пикселях (например, width: 1200px). Замените их на относительные единицы: width: 100% или width: 100vw.
2. Отсутствие ограничения для изображений. Всегда добавляйте для тега img свойство max-width: 100%. Это предотвращает растягивание страницы по горизонтали.
3. Горизонтальная прокрутка. Если страница все же «уезжает» вправо, используйте overflow-x: hidden для тега body.

Шаг 4: Обработка поворота экрана и изменения размеров

Если ваше приложение допускает смену ориентации устройства или запуск в режиме разделенного экрана, ПолеHTMLДокумента не всегда автоматически пересчитывает масштаб. Мы рекомендуем использовать событие ПриИзмененииРазмера формы, чтобы принудительно обновлять контент или вызывать перерисовку через JavaScript.

Посмотрим на логику обработки:

&НаКлиенте
Процедура ПолеHTMLПриИзмененииРазмера(Элемент)
    // Вызываем JS функцию для пересчета масштаба
    Элемент.Документ.parentWindow.eval("window.dispatchEvent(new Event('resize'));");
КонецПроцедуры

Этот код отправляет событие изменения размера непосредственно в HTML-документ, что заставляет адаптивные скрипты (если они есть на самой странице) сработать повторно с учетом новых габаритов поля.

Итоги и рекомендации

В ходе анализа мы выяснили, что ПолеHTMLДокумента в 1С — это полноценный, но капризный WebView. Чтобы добиться стабильного отображения, помните следующее:

• Никогда не полагайтесь исключительно на мета-тег viewport в мобильных версиях 1С.
• Всегда используйте «резиновую» верстку с относительными единицами измерения.
• Используйте JavaScript-инъекции для принудительной перерисовки документа в событии ДокументСформирован.
• Если страница содержит тяжелые элементы или сложные скрипты, добавьте небольшую программную задержку перед выполнением адаптивных JS-скриптов, чтобы DOM-дерево успело полностью сформироваться.

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