Как увеличить уровень масштабирования браузера при загрузке страницы?

вот моя веб-ссылка Недавно у меня появилась задача увеличить ее ширину, как если бы мы нажимали кнопку Ctrl + и уровень масштабирования браузера Firefox увеличивается, есть ли способ сделать это автоматически во всех браузерах при загрузке страницы.

Ответ 1

Лично я думаю, что это плохая идея; либо сконструируйте свой сайт так, чтобы он легко масштабировался (не сложно с помощью надлежащих методов CSS/HTML) или просто позволял пользователю делать то, что им нужно (возможно, у них уже есть увеличенный браузер или они используют низкое разрешение). Как правило, вы не должны принимать решения UX для людей.

Но это возможно.

Демо: http://jsfiddle.net/q6kebgbh/4/

.zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
}

Обратите внимание, что в предыдущих версиях этого ответа использовался transform для поддержки большего количества браузеров. Однако этот сокращенный код работает для текущих версий Chrome, FF, Safari и IE (а также предыдущих версий IE, которые поддерживали zoom в течение длительного времени).

Ответ 2

Попробуйте следующее:

<script type="text/javascript">
        function zoom() {
            document.body.style.zoom = "300%" 
        }
</script>

<body onload="zoom()">
<h6>content</h6>
</body>

Ответ 3

Вы можете попробовать правило CSS zoom. Я никогда не пробовал это, но теоретически установка правила css, как показано ниже, может сделать то, что вы хотите:

body { zoom: 2; }

Примечание. Это фактически не изменяет уровень масштабирования браузеров. Это просто делает все на странице больше:)

Ответ 4

У меня есть PWA, который имеет минималистичный дизайн с большим количеством пробелов и в первую очередь предназначен для мобильных телефонов (поэтому изначально я не думал о больших экранах).

Поэтому, когда вы открываете его на очень большом экране (телевизоре или большом мониторе), это выглядит очень некрасиво (потому что в этот момент слишком много пустого пространства). И как пользователь, мне нужно каждый раз увеличивать его. Мое веб-приложение более эстетично, а также легче в использовании с дивана на телевизоре, когда оно немного увеличено на этом большом экране.

Поэтому в @media я изменяю свойство масштабирования, если изображение слишком широкое. Проблема в том, что -moz-transform: масштаб абсолютно отличается от zoom.

В итоге, если вы хотите увеличить сайт с помощью CSS, у вас есть три варианта:

(рекомендуется сложнее для существующей страницы) Использовать единицы em и rem при разработке своей страницы. Это позволит изменить "масштабирование" страницы так же просто, как изменить размер шрифта на теле.
(проще для существующей страницы) Использовать "transform: scale" для работы в разных браузерах, но он может работать не так, как вы ожидали.
(не рекомендуется, легко для существующей страницы) Использовать CSS-свойство zoom, несмотря на то, что оно не является стандартным свойством. Жертвоприношения Firefox. Кроме того, есть некоторые незначительные неожиданные поведения с абсолютно позиционированными флексбоксами.