Как правильно выводить таблицы в веб-клиенте 1С на мобильных устройствах?

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

Почему стандартные таблицы 1С плохо работают на смартфонах

Основная проблема заключается в том, что стандартная таблица платформы 1С не всегда обладает адаптивностью, необходимой для узких экранов мобильных устройств. Мобильные браузеры, такие как Safari на iOS и Chrome на Android, по-разному интерпретируют размеры элементов, если они не заданы явно через CSS-стили. В результате таблица может «улетать» вправо, а интерфейс формы становится неуправляемым.

Решение: использование Поле HTML документа

Для создания надежных и адаптивных таблиц в веб-клиенте мы будем использовать объект Поле HTML документа. Этот метод позволяет полностью контролировать верстку с помощью HTML и CSS, обеспечивая корректное отображение на любом устройстве.

Для начала добавим на форму управляемого приложения элемент Поле HTML документа. Именно в него мы будем программно передавать сгенерированный нами HTML-код.

Алгоритм формирования HTML-таблицы

Рассмотрим пошагово, как подготовить данные и вывести их в форму. Мы будем использовать базовые теги table, tr, th и td. Для того чтобы таблица выглядела аккуратно и адаптировалась под ширину экрана, обязательно используйте CSS-стили.

В модуле формы или в обработке напишем процедуру формирования HTML-строки:

РезультатОтчета = \"<!DOCTYPE html>\";
РезультатОтчета = РезультатОтчета + \"<html>\";
РезультатОтчета = РезультатОтчета + \"<head>\";
РезультатОтчета = РезультатОтчета + \"<style>\";
РезультатОтчета = РезультатОтчета + \"table {font-family: arial, sans-serif; border-collapse: collapse; width: 100%;}\";
РезультатОтчета = РезультатОтчета + \"td, th {border: 1px solid #dddddd; text-align: left; padding: 8px;}\";
РезультатОтчета = РезультатОтчета + \"tr:nth-child(even) {background-color: #dddddd;}\";
РезультатОтчета = РезультатОтчета + \"</style>\";
РезультатОтчета = РезультатОтчета + \"</head>\";
РезультатОтчета = РезультатОтчета + \"<body>\";
РезультатОтчета = РезультатОтчета + \"<table>\";
// Добавляем заголовки
РезультатОтчета = РезультатОтчета + \"<tr><th>Дата</th><th>Сумма</th></tr>\";

Выборка = Запрос.Выполнить().Выбрать();
Пока Выборка.Следующий() Цикл
    РезультатОтчета = РезультатОтчета + \"<tr>\";
    РезультатОтчета = РезультатОтчета + \"<td>\" + Формат(Выборка.РабочийДень, \"ДФ=dd.MM.yyyy\") + \"</td>\";
    РезультатОтчета = РезультатОтчета + \"<td>\" + Формат(Выборка.Сумма, \"ЧДЦ=2\") + \"</td>\";
    РезультатОтчета = РезультатОтчета + \"</tr>\";
КонецЦикла;

РезультатОтчета = РезультатОтчета + \"</table>\";
РезультатОтчета = РезультатОтчета + \"</body>\";
РезультатОтчета = РезультатОтчета + \"</html>\";

Важные рекомендации по адаптивной верстке

Чтобы избежать ошибок на мобильных устройствах, особенно на iOS, необходимо следовать нескольким строгим правилам:

1. Правильная структура тегов: Всегда следите за тем, чтобы все теги (head, body, table) открывались и закрывались в строгом порядке. Ошибки в структуре HTML — основная причина появления сообщений об «Script error» в Safari.
2. Использование мета-тега viewport: Чтобы мобильный браузер понимал, как масштабировать страницу, добавьте в секцию head следующий мета-тег:
   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
3. Относительные единицы измерения: Никогда не задавайте ширину таблицы или ячеек в фиксированных пикселях (например, width: 800px). Используйте width: 100%, чтобы таблица автоматически подстраивалась под ширину экрана смартфона.
4. Прокрутка: Если таблица содержит много колонок, оберните её в контейнер (например, div) с CSS-свойством overflow-x: auto;. Это позволит пользователю прокручивать таблицу горизонтально внутри блока, не «ломая» при этом остальную часть интерфейса приложения.

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