☰

Google Chrome — Масштабирование без изменения области просмотра

tag-icon • tag-icon google-chrome google-chrome-extensions zoom
Google Chrome — Масштабирование без изменения области просмотра

Возможно, я что-то упустил или не знаю, как правильно сформулировать свой вопрос, но мне не удалось найти в Интернете никакой информации по этому поводу.

Я хотел бы увеличить масштаб в Chrome, не меняя область просмотра или веб-сайт вообще. Так что, если я увеличиваю масштаб веб-сайта, я могу увеличить масштаб детали без моего адаптивного дизайна, перемещающего его и масштабирующего до «правильного» размера.

Есть ли расширение для Chrome или способ включить такую ​​функцию масштабирования в Chrome?

решение1

Если у вас есть высокоточная сенсорная панель (большинство новых ноутбуков оснащены такими) или сенсорный экран, вы можете развести пальцы, чтобы увеличить масштаб.

решение2

Это расширение — именно то, что вы ищете:Масштабирование пользовательской страницы

но, к сожалению, здесь нет коротких путей.

ПС: Имейте в виду, что это расширение запрашивает доступ к данным всех веб-сайтов, которые вы посещаете по какой-либо причине.

решение3

Для macOS
Возьмите веб-страницу. Нажмите Command и кнопку "+", чтобы увеличить.

Для Windows
Возьмите веб-страницу. Нажмите и удерживайте кнопку Ctrl и прокрутите колесо мыши вверх.

Редактировать

1) Перейдите в Системные настройки->Универсальный доступ.
2) Выберите «Масштаб» и включите «Использовать сочетания клавиш для масштабирования».
3) Запишите сочетания клавиш.
4) По умолчанию ⌥- ⌘- =для увеличения и ⌥- ⌘- -для уменьшения.

решение4

Пользовательские агенты ( Chrome, Firefox, Chrome для Android и т. д. ) имеют поведение по умолчанию, устанавливающее тело на 100% области просмотра, если быть точным, визуальной области просмотра. Следовательно, когда окно изменяется, область просмотра (макет и визуальная область) изменяется, что заставляет его всегдасоответствоватьконтента и вызывая другие нежелательные (не всегда) последствия, такие как изменение макета в адаптивном дизайне.

Если вы используете подход, ориентированный на мобильные устройства, задайте для body min-width(в вашем медиа-запросе) абсолютное значение и используйте min-device-widthили max-device-widthдля запуска ваших медиа-запросов.

Это приведет к запуску медиа-запросов не при изменении размера окна браузера, а только тогда, когда контент отображается на устройстве, размер которого указан в вашем медиа-запросе.

Например:

body {
width : 90%;
}

И используйте медиа-запросы вроде:

@media screen and (min-device-width: 960px) {

  body {
   width : 900px;
  }

// Other CSS Rules to apply when device width > 960px
}

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

Используя этот подход, вы также можете пропустить использование <meta name="viewport" content="width=device-width, initial-scale=1" >тега (хотя это не рекомендуется).

Надеюсь это поможет!

Связанный контент