Увеличить приложение до 80% по CSS

Мы используем приложение с открытым исходным кодом, и все в порядке. Единственное, что мне не нравится в продукте, это его макет и размер текста. Если я увеличу до 80% (либо Firefox, либо Chrome Browaer), то приложение выглядит идеально. Поскольку наши конечные пользователи не очень разбираются в технологиях, я хочу, чтобы приложение открывалось в режиме 80% -ного увеличения.

Есть ли способ сделать это в CSS или JQuery.

Я попробовал ниже

body {
    -moz-transform: scale(0.8, 0.8); /* Moz-browsers */
    zoom: 0.8; /* Other non-webkit browsers */
    zoom: 80%; /* Webkit browsers */
}

но не помогает... это не то же самое, что делать представление -> масштабирование -> - в Firefox

Источник

3 ответа

Решение

Это действительно невозможно с помощью CSS и / или JQuery. Ручное масштабирование в браузере и свойство CSS zoom работают по-разному и дают разные результаты.

источник: изменение уровня масштабирования браузера

Альтернатива: при загрузке страницы предоставьте пользователям модальное окно с инструкциями, как вручную увеличивать / уменьшать масштаб, закрывать его после успешного масштабирования.

Источник

Для мобильных устройств вы можете сделать это с помощью мета-тега viewport.

<meta name="viewport" content="width=device-width, initial-scale=0.8"/>

Тем не менее, для настольных компьютеров, вы можете взглянуть на этот polyfill от Nemo64.

$.cssNumber.zoom = true;
if (!("zoom" in document.body.style)) {
    $.cssHooks.zoom = {
        get: function(elem, computed, extra) {
            var value = $(elem).data('zoom');
            return value != null ? value : 1;
        },
        set: function(elem, value) {
            var $elem = $(elem);
            var size = { // without margin
                width: $elem.outerWidth(),
                height: $elem.outerWidth()
            };
            $elem.data('zoom', value);
            if (value != 1) {
                $elem.css({
                    transform: 'scale(' + value + ')',
                    marginLeft: (size.width * value - size.width) / 2,
                    marginRight: (size.width * value - size.width) / 2,
                    marginTop: (size.height * value - size.height) / 2,
                    marginBottom: (size.height * value - size.height) / 2
                });
            } else {
                $elem.css({
                    transform: null,
                    margin: null
                });
            }
        }
    };
}

После добавления полифилла вы можете запустить $.cssHooks.zoom.set("body", 0.8);,

Источник

Вы пытались использовать CSS-преобразование?

.учебный класс{

преобразование: шкала (0,8);

}

Это можно использовать в условиях HTML, которые определяют типы браузеров и медиазапросы CSS.

Источник
Другие вопросы по тегам