Как уменьшить масштаб страницы в браузере
Обновлено: 21.11.2024
вот моя веб-ссылка, недавно я получил задание увеличить ее ширину, как если бы в Firefox мы нажали Ctrl +, и уровень масштабирования браузера увеличился, есть ли способ сделать это автоматически во всех браузерах при загрузке страницы.
@TimMedora спасибо за ответ, на самом деле потребовалось больше времени, чтобы увеличить размер всех вещей, и я думаю, что если я просто увеличу уровень масштабирования, то лучше добавить код на страницы
Являюсь ветераном веб-разработки с десятилетним стажем и никогда не думал, что мне понадобится масштабирование, поскольку оно посягает на контроль пользователя. Однако для моего интранет-приложения у нескольких пользователей настроены различные разрешения в соответствии с их разным зрением. Мой сайт прекрасно масштабируется, но в некоторых случаях он настолько больше, что его необходимо самостоятельно уменьшить по сравнению с другими сайтами, которые они посещают. Я могу предоставить параметр, который они могут сохранить (сохранить в нашей базе данных), который уменьшает масштаб сайта, чтобы им не приходилось постоянно возиться с элементами управления увеличением/размером текста каждый раз, когда они заходят в мое приложение.
4 ответа 4
Лично я думаю, что это плохая идея; либо спроектируйте свой сайт так, чтобы он легко масштабировался (не сложно с правильными методами CSS/HTML). Как правило, вы не должны принимать решения по UX за людей.
Но это возможно.
Обратите внимание, что в предыдущих версиях этого ответа использовалось преобразование для поддержки большего количества браузеров. Однако этот сокращенный код работает в текущих версиях Chrome, FF, Safari и IE (а также в предыдущих версиях IE, которые долгое время поддерживали масштабирование).
Большое спасибо, все работает, отлично работает в Firefox, Chrome, но не работает в старом Internet Explorer. Любое предложение, я также загружаю ie8
@DanishIqbal — вам нужно будет использовать два разных метода для поддержки старых версий IE. Я обновил образец, чтобы показать поддержку всех браузеров.
ПРИМЕЧАНИЕ. На самом деле это НЕ масштабирование в браузере. Масштаб браузера по-прежнему установлен на 100%, используя эту технику.
Да, согласен с @cronoklee. Проблема заключается в том, что размеры будут отображаться как 100%, а когда они визуально отображаются как 200%, может возникнуть проблема. Область просмотра по-прежнему 100%. Например, при отображении видео часть находится ниже области просмотра, и пользователь не может нажать кнопку остановки. Вместо этого, используя масштабирование в браузере, все работает отлично.
@Erwinus - да, обратите внимание, что этому ответу 3,5 года, и я даже тогда подумал, что это плохая идея. Я считаю, что все современные браузеры теперь поддерживают собственное масштабирование, поэтому нет веской причины использовать этот подход для всей страницы. Масштабирование определенного элемента по-прежнему имеет свои применения (например, анимация размера элемента при наведении курсора).
Вы можете попробовать правило масштабирования CSS. Я никогда не пробовал это, но теоретически установка правила css, подобного следующему, может сделать то, что вы хотите:
Примечание: на самом деле это не изменяет уровень масштабирования в браузере. Это просто делает все на странице больше :)
@jaremysawesome спасибо, так что все работает в Chrome, Internet Explorer, но не в Firefox, есть предложения
У меня есть PWA, который имеет минималистичный дизайн с большим количеством пробелов и предназначен в первую очередь для мобильных телефонов (поэтому изначально я не думал о больших экранах).
Поэтому, когда вы открываете его на очень большом экране (телевизор или большой монитор), он выглядит очень уродливо (потому что в этом месте слишком много пробелов). И как пользователь, мне нужно каждый раз увеличивать его. Мое веб-приложение выглядит более эстетично, а также его легче использовать с дивана перед телевизором, когда оно немного увеличено на большом экране.
Поэтому в @media я изменяю свойство масштабирования, если дисплей слишком широкий. Проблема в том, что -moz-transform: масштаб абсолютно отличается от масштабирования.
Итог, если вы хотите увеличить веб-сайт с помощью CSS, у вас есть три варианта:
(рекомендуется, сложнее для существующей страницы) Использовать единицы em и rem при разработке страницы. Это позволит изменить «масштаб» страницы так же просто, как изменить размер шрифта в теле.
(проще для существующей страницы) Чтобы использовать "преобразование: масштабирование" для работы в разных браузерах, но это может работать не так, как вы ожидали.
(не рекомендуется, просто для существующей страницы) Использовать свойство CSS "масштабирование", несмотря на то, что оно не является стандартным свойством. Жертвует Firefox. Кроме того, есть небольшое неожиданное поведение с абсолютно позиционированными флексбоксами.
Ответы на наиболее распространенные вопросы можно найти в базе знаний ITS!
Если вам нужно изменить размер содержимого веб-сайта, используйте функцию МАСШТАБИРОВАНИЯ в Google Chrome, чтобы уменьшить или увеличить текст и изображения.
Есть 2 способа настроить параметры масштабирования: постоянно установить уровень масштабирования для всех страниц, открываемых в Chrome (полезно при использовании дисплеев с высоким разрешением), или настроить параметры масштабирования вручную в каждом конкретном случае.
По умолчанию Chrome устанавливает масштаб на 100 %. Чтобы настроить параметры вручную, используйте клавишу Ctrl и комбинации «+» или «-», чтобы увеличить или уменьшить масштаб страницы.Если вы используете мышь, вы можете удерживать клавишу Ctrl на клавиатуре и использовать колесико мыши для увеличения или уменьшения масштаба.
Когда вы это сделаете, справа от адресной строки появится значок, указывающий, что уровень масштабирования отличается от значения по умолчанию. Нажмите кнопку «Восстановить по умолчанию», чтобы вернуть странице уровень увеличения по умолчанию.
Чтобы настроить уровень увеличения по умолчанию, чтобы все страницы открывались с определенным уровнем масштабирования, нажмите три горизонтальные линии в правом верхнем углу Chrome и выберите настройки вариант.
На странице настроек нажмите ссылку Показать дополнительные настройки… в нижней части страницы. Это отобразит некоторые дополнительные настройки, которые вы можете настроить.
Пролистайте вниз, пока не увидите раздел "Веб-контент". Отсюда вы можете установить параметры увеличения по умолчанию для всех веб-страниц. Вы также можете настроить шрифты и размеры, чтобы улучшить визуальные эффекты веб-сайтов.
Выберите нужный вариант и закройте вкладку "Настройки". Ваш выбор будет запомнен.
Помогите, эта веб-страница слишком мала для чтения! Кто не испытывал этого раньше? В этой статье рассказывается о быстром решении этой распространенной проблемы и о том, как использовать функцию масштабирования браузера в своих интересах.
Это случается с каждым в какой-то момент. Ваш интернет-браузер показывает вам слишком маленький или слишком большой веб-сайт. Это просто потому, что вы случайно увеличили или уменьшили масштаб, и теперь должны выяснить, как вернуть его обратно. Не волнуйтесь. Пока вы все еще можете читать эту статью, она поможет вам вернуть его в нормальное состояние и использовать функции масштабирования, чтобы улучшить ваш опыт. Мы сосредоточимся на Firefox и Chrome.
Быстрая коррекция масштабирования в Firefox
Один щелчок — это все, что вам нужно, чтобы восстановить 100% просмотр в Firefox.
Если веб-сайт, который вы просматриваете, не на 100 %, он сообщит вам об этом в верхней части Firefox прямо в адресной строке. Если вы просто хотите вернуть его к 100%, нажмите кнопку процента. Легко.
Просто удерживайте клавиши, выделенные оранжевым цветом, чтобы вернуть масштаб по умолчанию.
Есть также сочетание клавиш. Удерживая нажатой клавишу Ctrl и 0 (это ноль, а не о), чтобы вернуть его в нормальное состояние.
Быстрая коррекция масштабирования в Chrome
Самый быстрый способ вернуться к 100 % в Chrome — использовать сочетание клавиш. Удерживайте ctrl и 0 (ноль), чтобы размер страницы снова стал обычным.
Если вам не нравятся сочетания клавиш, альтернативой является всего один дополнительный шаг. Нажмите на увеличительное стекло справа от адресной строки и нажмите «Сброс». Вуаля, ваш масштаб вернулся к норме.
Использование Zoom по назначению
Возможно, вы хотите увеличить страницу, чтобы вам было легче видеть детали или читать слова. Возможно, вместо этого вы захотите уменьшить масштаб и одновременно просмотреть большую часть страницы. В любом случае, функция масштабирования была сделана не просто для того, чтобы ее исправлять. Вот как его правильно использовать.
Увеличение или уменьшение масштаба в Firefox и Chrome
На приведенной выше клавиатуре показано, где найти клавиши для этого сочетания клавиш.
Для увеличения можно использовать сочетание клавиш. Просто удерживайте Ctrl и кнопку "плюс" в конце цифровых клавиш.
Есть также сочетание клавиш для уменьшения масштаба. Удерживайте Ctrl и клавишу «минус», расположенную рядом с клавишей «плюс».
Вы также можете использовать комбинацию клавиши Ctrl на клавиатуре и колеса прокрутки мыши.
Firefox и Chrome имеют несколько различное взаимодействие с пользователем, но функция масштабирования находится примерно в одном месте.
Наконец, вы можете перейти к настройке масштабирования с помощью мыши, перейдя к многоточию в Chrome или значку гамбургера в Firefox. Посередине этих параметров находится контроллер масштабирования. Нажимайте значки "плюс" или "минус", чтобы настроить вид.
Максимум использования Zoom
Теперь, когда вы разбираетесь в использовании масштабирования, подумайте, как это может облегчить работу в Интернете. Просматривайте веб-сайты так, как вам удобнее их просматривать. Легко увеличивайте или уменьшайте масштаб!
С этого момента, если вы услышите, как кто-то спросит: "Почему этот сайт такой маленький?" у вас есть ноу-хау, чтобы это исправить.
Valiant Technology — отмеченный наградами поставщик управляемых услуг для инновационных отраслей в Нью-Йорке.
Подпишитесь на ежемесячный электронный дайджест Valiant
Ежемесячный дайджест электронной почты Valiant наполнен оригинальным контентом, написанным нашими сотрудниками, техническими новостями и бизнес-аналитикой.
Google Chrome поддерживает встроенную функцию масштабирования, с помощью которой пользователи могут изменять размер содержимого веб-страницы, например текста, и элементов мультимедиа, например изображений. Опция масштабирования страницы в браузере Chrome весьма полезна для всех пользователей. Они использовали эту функцию для увеличения и уменьшения размера отдельных элементов.
В этой статье мы рассмотрим, как увеличить и уменьшить масштаб всей страницы и ее элементов в Google Chrome.
Примечание. Функция масштабирования в Chrome не зависит от разрешения экрана, настроек шрифта или DPI базовой операционной системы.
Увеличение и уменьшение масштаба страницы в Google Chrome
Чтобы элементы веб-страницы были более четкими в Chrome, вы можете установить разрешение страницы, увеличить масштаб или увеличить экран. Используя следующие различные способы, вы можете увеличивать и уменьшать содержимое веб-страницы. Во-первых, постоянно настраивайте уровень масштабирования для всех страниц, а второй вариант – ручная настройка параметров масштабирования.
По умолчанию в Chrome уровень масштабирования установлен на 100 %. Вы можете настроить эти параметры вручную, нажав Ctrl и знак плюс (+), чтобы увеличить или увеличить масштаб страницы, а Ctrl и знак минус (-) используются для уменьшения масштаба.
Вы также можете масштабировать содержимое страницы с помощью мыши. Держите палец на клавише Ctrl на клавиатуре и перемещайте колесико мыши, чтобы увеличивать и уменьшать масштаб. Использование Ctrl + 0 используется для сброса параметра масштабирования или нажатия кнопки «Сброс».
Другой способ получить доступ к параметрам увеличения и уменьшения масштаба в браузере Chrome — нажать кнопку настроек Chrome, а затем перейти к параметру "Масштаб". Нажмите знак +, чтобы увеличить масштаб веб-страницы, и нажмите знак –, чтобы уменьшить масштаб.
Если вы хотите отрегулировать уровень масштабирования всех веб-страниц в одинаковом соотношении, нажмите кнопку настроек (три точки), расположенную в верхнем углу браузера. Теперь в раскрывающемся списке нажмите «Настройки».
Открыв страницу настроек в браузере, вы увидите следующее окно:
Теперь прокрутите курсор или щелкните параметр «Внешний вид» на левой боковой панели окна отображения. Вы увидите следующие параметры в поле «Внешний вид», которые выделены красным цветом на изображении ниже:
Здесь вы можете выполнить настройку браузера Chrome, например изменить размер шрифта, масштабирование страницы, темы и т. д. изменить уровень масштабирования окна в соответствии с вашими возможностями.
После изменения настроек масштаба страницы закройте вкладку настроек Chrome. Теперь вы можете увидеть новые настройки браузера в своем браузере.
Заключение
В этой статье мы объяснили, как увеличивать и уменьшать экран в Google Chrome. Если вы хотите настроить размер содержимого веб-страницы, то с помощью функции «Масштаб» вы можете увеличивать и уменьшать видимость изображения. Если вы используете устройство с сенсорным экраном, то с помощью двух пальцев перемещайтесь по экрану браузера после увеличения. Кроме того, вы также можете использовать функцию масштабирования, установив любое из ваших любимых расширений, таких как Photo zoom, w zoom и т. д. из интернет-магазина Chrome.Пожалуйста, присылайте нам свои отзывы через комментарии в случае каких-либо трудностей.
Об авторе
Карим Буздар
Карим Буздар имеет степень инженера в области телекоммуникаций и несколько сертификатов системного администратора. Как ИТ-инженер и технический автор, он пишет для различных веб-сайтов. Он ведет блог на LinuxWays.
По мере того, как я становился старше, мое зрение ухудшилось: «Боже! Почему этот шрифт такой большой, проверьте зрение!» – к – «Вы можете сделать этот шрифт немного больше? Мне уже не 25 лет, и мне нужно проверить зрение».
Я ожидаю, что многие из наших пожилых читателей испытывают то же самое. К счастью, есть быстрый способ сделать веб-страницу в браузерах Safari и Chrome более удобной для чтения.
Как увеличивать и уменьшать масштаб в Safari и Chrome на Mac
При просмотре страницы в Safari или Chrome нажмите пункт меню «Просмотр» в меню любого браузера. Там вы увидите три варианта просмотра веб-страницы.
Увеличить
Выберите этот параметр, чтобы увеличить масштаб веб-страницы. Когда вы нажмете эту опцию, все в вашем браузере станет больше. Это включает в себя текст, графику и видео. Нажимайте кнопку «Увеличить», пока изображение не станет читабельным для вас. Возможно, вам придется изменить размер браузера, чтобы просмотреть всю веб-страницу.
Вы также можете удерживать клавишу «⌘» и нажимать «+» на клавиатуре Mac, чтобы увеличить отображение страницы браузера.
Уменьшить
Выберите этот параметр, чтобы уменьшить масштаб веб-страницы. Когда вы нажмете эту опцию, все в вашем браузере станет меньше. Это включает в себя текст, графику и видео. Нажимайте кнопку «Уменьшить», пока экран не станет подходящего размера.
Вы также можете удерживать клавишу «⌘» и нажимать «-» на клавиатуре Mac, чтобы уменьшить отображаемую страницу браузера.
Реальный размер
Чтобы просмотреть веб-страницу так, как задумано разработчиком, выберите параметр «Реальный размер» в меню «Вид». Это приведет к тому, что веб-страница вернется к своему первоначальному размеру, независимо от того, насколько сильно вы отрегулировали отображение.
Вы также можете удерживать клавишу «⌘» и нажимать «0» на клавиатуре вашего Mac, чтобы уменьшить отображаемую страницу браузера.
В заключение
Используя меню «Вид» вашего браузера, вы можете удобно просматривать любую веб-страницу всего несколькими щелчками мыши или касаниями клавиатуры.
Для получения дополнительных советов и рекомендаций о том, как лучше использовать свой Mac, устройство iOS, Apple Watch или Apple TV, обязательно посетите раздел «Как сделать» на нашем веб-сайте.
Читайте также: