zoom
Изменяет масштаб объекта согласно заданному значению.
Синтаксис
Значения
значение Число с плавающей запятой, значение 1.0 соответствует normal . Значения больше 1.0 увеличивают масштаб объекта, значения меньше 1.0 уменьшают масштаб. проценты Целое число, заданное в процентах. Указывает изменение масштаба относительно 100%, которое соответствует значению normal . normal Объект имеет исходный масштаб.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
zoom .zoom:hover 
В данном примере масштаб рисунка увеличивается в три раза при наведении на него курсора мыши.
Объектная модель
[window.]document.getElementById(» elementID «).style.zoom
Браузеры
Браузер Internet Explorer с версии 8.0 понимает также свойство — ms-zoom .
Как изменить масштаб html страницы?
Что нужно прописать CSS для того, чтобы уменьшить масштаб HTML страницы? В браузере можно сделать так: нажать последовательно CTRL и — . После этого масштаб страницы уменьшится с сохранением ширины документа. Это важный момент, т. к. решения, которые я находил в интернете уменьшали масштаб и в том числе сужали страницу по ширине. Мне требуется уменьшить масштаб, но ширину страницы сохранить (уменьшить шрифт, например).
Отслеживать
32k 19 19 золотых знаков 79 79 серебряных знаков 105 105 бронзовых знаков
задан 11 июн 2015 в 13:24
user179410 user179410
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Это функция браузера, которая не описана в стандартах. Браузеры вольны реализовывать масштабирование так, как захочется левой пятке архитектора браузера, а также учитывать предпочтения юзера в настройках.
Так как «уникальные» для браузеров фичи признаны Вселенским Злом™, то из жабоскрипта масштабирование недоступно.
Масштабирование может быть реализовано самим сайтом с помощью возможностей CSS.
Правильный способ
Использовать относительные размеры для шрифтов ( % , em и др.), в корне страницы менять размер базового шрифта.
Для остальных элементов можно добавить дополнительные стили и опять же в зависимости от класса корня менять размер. Для картинок будет разумно округлять масштаб до «круглых» чисел вроде 50%, 33% и т. п.
Жёсткий способ
Использовать стандартное свойство CSS transform . Можно добавить в корень документа стиль transform: scale(N%) , тогда отмасштабируется вся страница. Учтите, что за качество и производительность никто не отвечает.
Чтобы сохранить ширину страницы, её можно менять в соответствии с масштабом (помножить на обратное число, собственно).
Костыльный способ
Ипользовать нестандартное свойство CSS zoom . Опять же в корень можно добавить zoom: N% . Поддержка не гарантируется, работает не во всех браузерах.
Пример правильного способа:
$(function() < var fontSize = 12; var imgScales = < small: 0.25, normal: 0.50, large: 1.00 >function setFontSize(fontSize) < var zoomLevel = 'normal'; if (fontSize = 15) zoomLevel = 'large'; var imgScale = imgScales[zoomLevel]; $('#root').css('font-size', fontSize + 'pt'); $('#root').removeClass('zoom-small zoom-normal zoom-large'); $('#root').addClass('zoom-' + zoomLevel); $('img.scalable').each(function() < $(this).css('width', this.naturalWidth * imgScale); $(this).css('height', this.naturalHeight * imgScale); >); > $('#plus').on('click', function() < setFontSize(++fontSize); >); $('#minus').on('click', function() < setFontSize(--fontSize); >); >);#root < font: 12pt sans-serif; width: 500px; background: lightskyblue; >p < font-size: 1em; >h1
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Можно ли изменить масштаб сайта при помощи html или css?
Можно ли сделать так,чтобы во всех браузерах автоматически для конкретного сайта выставлялся масштаб не 100% а 75%, например?
- Вопрос задан более трёх лет назад
- 33530 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 3
Алина Брэнн @alina_ivanovna
Вопрос был задан давно, но вдруг кому-то пригодится,
body < zoom: 75%>отлично с этим справляется, прям как надо. Но надо быть осторожным с большими экранами, лучше задавать через «@media»
Ответ написан более трёх лет назад
Нравится 4 1 комментарий
zoom не работает в firefox ='( https://bugzilla.mozilla.org/show_bug.cgi?id=390936
Инженер и вэб-дизайнер, рисую.
Вы можете использовать css3 transform scale htmlbook.ru/css/transform
Но если речь идет об изменении масштаба пользователем посредством настройки браузера — то нет, Вы не сможете это сделать. Более того, за подобные штуки в мобильных версиях сайта через
надо руки отрывать.
Нельзя навязывать такие вещи пользователю, масштаб не просто так придуман.
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
@korobochkin ага
@ninalykova куда Вы пропали? Как-то отреагируйте на ответ. Поясните подробнее, что хотите, если мой ответ Вас не устраивает. Я Вас не так понял?
Павел Гоголинский @gogolinsky
Ну тут два варианта
1) Если вы говорите про свой собственный сайт, то установите в css для тега body width:75%
2) Если вы говорите не про свой сайт (например кинопоиск), то придется создавать внешний css со строкой
body
И в настройках браузера его указать как пользовательский стиль
Изменение масштаба браузера для сайта JavaScript для малых экранов
Масштабирование (зум) браузера является полезной функцией, позволяющей увеличить или уменьшить размер содержимого веб-страницы. В этой статье мы рассмотрим, как использовать JavaScript для изменения масштаба браузера на определенном диапазоне ширины окна.
Для чего это нужно?
Изменение масштаба браузера может быть полезным, когда вы хотите оптимизировать отображение вашего веб-сайта на различных устройствах и экранах. Например, вы можете хотеть установить определенный масштаб для экранов среднего размера, чтобы улучшить читаемость и визуальное восприятие на таких устройствах.
Как это работает?
Для изменения масштаба браузера с помощью JavaScript мы будем использовать метод matchMedia, который проверяет условие ширины окна браузера. Если условие выполняется, мы применяем масштабирование для элемента body. При этом мы также добавляем обработчик события resize, чтобы масштабирование автоматически обновлялось при изменении размера окна.
Давайте рассмотрим код по шагам:
1. Определение функции setZoom()