Skip to main content

Скрытие блоков сайта в приложении (Через стили)

При конвертации вашего сайта в мобильное приложение с помощью сервиса Converzilla, в содержимое сайта автоматически добавляются определенные стили и классы. Эти изменения предназначены для оптимизации отображения вашего сайта в мобильном приложении.

Автоматическое добавление стилей

При конвертации вашего сайта в мобильное приложение с помощью Converzilla, в содержимое сайта добавляются следующие CSS классы:

1. .converzilla-hide: Этот класс скрывает элементы, устанавливая их свойство display в значение `none`:
 

.converzilla-hide {
       display: none !important;
 }

2. .converzilla-show: Этот класс отображает элементы, устанавливая их свойство display в значение `block`:
 

.converzilla-show {
       display: block !important;
   }

Кроме того, в тег `<body>` добавляется класс `converzilla`, который позволяет вам вносить изменения в стили сайта, чтобы он отображался по-другому в мобильном приложении.

Пример использования

Для изменения стилей элементов вашего сайта, когда он отображается в мобильном приложении, вы можете использовать класс `converzilla`, добавленный к тегу `<body>`. Например:

body.converzilla .your-element {
    background-color: #f0f0f0;
    color: #333;
}

Этот пример изменит фон и цвет текста элемента с классом `your-element` только при отображении в мобильном приложении.

Тестирование

Чтобы протестировать изменения в отображении вашего сайта при конвертации его в мобильное приложение с помощью Converzilla, вы можете использовать следующий JavaScript код. Этот код добавит необходимые стили и класс converzilla к тегу <body> на вашем сайте.

(function() {
    // Функция для добавления стилей
    function addConverzillaStyles() {
        var styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.innerHTML = `
            .converzilla-hide {
                display: none !important;
            }
            .converzilla-show {
                display: block !important;
            }
        `;
        document.head.appendChild(styleElement);
    }

    // Функция для добавления класса к body
    function addConverzillaClass() {
        document.body.classList.add('converzilla');
    }

    // Проверка, если документ уже загружен
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        addConverzillaStyles();
        addConverzillaClass();
    } else {
        // Если документ еще не загружен, добавляем слушатель события DOMContentLoaded
        document.addEventListener('DOMContentLoaded', function() {
            addConverzillaStyles();
            addConverzillaClass();
        });
    }
})();

Инструкции по использованию

• Откройте ваш сайт в браузере.
• Откройте инструменты разработчика (обычно это F12 или Ctrl+Shift+I).
• Перейдите на вкладку “Консоль”.
• Вставьте код выше в консоль и нажмите Enter.

Полезные советы

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

Конвертация сайта в мобильное приложение с помощью Converzilla предоставляет мощные инструменты для управления отображением вашего сайта. Используя предоставленные классы и стили, вы можете легко адаптировать внешний вид вашего сайта для оптимального взаимодействия пользователей в мобильном приложении.

Back to top