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

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

45 голосов
/ 25 февраля 2012

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

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

Ответы [ 4 ]

54 голосов
/ 25 февраля 2012

Лично я считаю, что это плохая идея;Либо создайте свой сайт так, чтобы он легко масштабировался (не сложно с правильными методами 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).

15 голосов
/ 25 февраля 2012

Попробуйте это: 

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

<body onload="zoom()">
<h6>content</h6>
</body>
6 голосов
/ 25 февраля 2012

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

body { zoom: 2; }

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

1 голос
/ 01 марта 2018

Это ответ на такие посты типа

Лично я считаю, что это плохая идея;

или

почему бы не сделать стиль больше

e.t.c

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

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

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

Итак, если вы хотите увеличить сайт с помощью css, у вас есть три варианта:

  • (рекомендуется, сложнее для существующей страницы) Чтобы использовать единицы em и rem при разработке вашей страницы. Это позволит изменить «масштаб» страницы так же просто, как изменить размер шрифта на теле.

  • (проще для существующей страницы) Использовать «transform: scale» для работы в разных браузерах, но может работать не так, как вы ожидали.

  • (не рекомендуется, легко для существующей страницы) Использовать CSS-свойство «zoom», несмотря на то, что оно не является стандартным свойством. Жертвоприношения Firefox. Кроме того, при работе с абсолютно позиционированными флексбоксами у вас может быть несколько неожиданное поведение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...