Управление масштабом окон в браузере с помощью клавиатуры и специальных меню значительно снижает время, затрачиваемое на поиск информации и просмотр сайтов в интернете. Используя простые и доступные для запоминания комбинации кнопок, вы легко поместите в видимую область окна необходимый текст, картинки или видео.

Как уменьшить масштаб страницы

Работа с элементами страницы сайта и их габаритами чаще подразумевает увеличение размеров текста и изображений. Необходимость уменьшить текст или изображение возникает в нескольких случаях:

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

Существует несколько популярных браузеров, каждый из которых по-своему предлагает функции изменения размера отображаемого контента. На основе этих программ создаются десятки похожих приложений со сходным функционалом, поэтому в статье рассматриваются лишь часто используемые программы:

  • Google Chrome;
  • Mozilla Firefox;
  • Opera;
  • Internet Explorer;
  • Safari (платформа Apple Mac).

Чтобы узнать, как изменить масштаб окна внутри браузера от Яндекс, используйте данные по Google Chrome. Эта программа создавалась на основе бесплатно распространяемого исходного кода Chromium, так же, как браузер от Google. Менее популярные программные продукты используют похожие схемы управления содержимым. Программа иногда предусматривает возможность изменить горячие клавиши на более удобные для работы с окном.

В меню «Настройки»

С помощью мыши сделайте щелчок на меню, открываемое в верхней части. Это может быть как целая строка с надписью «Вид» среди прочих, так и одиночные иконки. В Опере это значок с соответствующим логотипом, а в Chrome такой элемент расположен в правой верхней части панели инструментов (кнопка с тремя горизонтальными полосами). Откройте меню одним из указанных методов, что приведет вас к нужному пункту и кнопкам для его увеличения или уменьшения. Нажимайте элемент со знаком «–» до тех пор, пока не останетесь удовлетворены результатом.

Горячими клавишами

Альтернативой для серии щелчков мышью в окне браузера будет использование горячих клавиш или комбинации клавиш для изменения габаритов иконок и символов. Большинство браузеров использует стандартную комбинацию «Ctrl+–», которая изменяет размер всех элементов в окне на фиксированное количество процентов относительно исходного значения. Платформа Apple Mac использует похожее сочетание клавиш с поправкой на иные символьные обозначения для управляющих клавиш.

Как увеличить масштаб экрана

Изменить размеры изображения веб-контента в большую сторону можно аналогично с действиями, указанными выше. Одно и то же меню используется для уменьшения или увеличения, а также для сброса параметра в исходное значение. Увеличивающая комбинация клавиш – «Ctrl» и «+». Используйте «+» на дополнительной клавиатуре, чтобы избежать конфликтов с другими клавиатурными сочетаниями. Возможность увеличить масштаб на экране используется в работе с текстом, написанным мелкими буквами.

Как изменить размер экрана на компьютере

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

Как изменить масштаб на ноутбуке

Клавиатура ноутбуков незначительно ограничивает комбинации клавиш, используемых для того, чтобы изменить видео или размер строк в окне. Вы найдете на вашей клавиатуре хотя бы один комплект кнопок «+», «–» и «0» для такой цели. Сочетание «Ctrl+0» пригодится, чтобы изменить значения обратно в 100%, например, в ситуации, когда вы чрезмерно расширили текст или изображения. Это сочетание уменьшает контент и возвращает страницу в первоначальный вид. Затем вы можете увеличить масштаб страницы на другое значение.

Видео: как поменять расширение экрана

Нашли в тексте ошибку? Выделите её, нажмите Ctrl + Enter и мы всё исправим!

Internet Explorer 10 в Windows 8 Release Preview поддерживает свойства ширины и высоты при адаптации для устройств CSS по рабочему черновику консорциума W3C. Это обеспечивает веб-разработчикам простое средство для управления автоматическим масштабированием контента в окнах различных размеров. В частности, это позволяет веб-сайтам легко адаптироваться под браузер Windows 8 в стиле Metro в прикрепленном представлении с книжной ориентацией.

Автоматическое масштабирование и случаи его применения

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


Снимок экрана с очень узкими окнами браузера, в которых открыты Википедия и веб-сайт TechCrunch.

Узкая разметка особенно важна в Windows 8, где прикрепленное представление браузера в стиле Metro имеет именно такой вид. Такая ситуация часто возникает при книжной ориентации на планшетах из-за малого размера форм-фактора.

В браузере в стиле Metro прикрепленное представление и книжная ориентация автоматически масштабируются по умолчанию, чтобы обеспечить ширину разметки как минимум 1024 пикселя. В мобильных устройствах с узким форм-фактором при отображении не оптимизированных для них страниц применяется похожий подход. Поскольку большинство страниц оптимизированы под ширину 1024 пикселя, они отображаются корректно, не урезая контент по умолчанию.


Википедия и веб-сайт TechCrunch в браузере Windows 8 в стиле Metro в прикрепленном представлении.

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

Эффективная работа в узком окне

Лучшими узкими разметками являются те, которые были специально созданы веб-разработчиками. Помимо подгонки страницы под более узкое окно, может также потребоваться изменить размеры изображений, перераспределить контент, использовать альтернативные средства для навигации по веб-сайту или применить иные фундаментальные изменения к контенту.

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

Замечательные примеры адаптированных разметок можно найти на веб-сайте Media Queries. А на веб-сайте Metal Toad Media можно ознакомиться с интересной статьей, в которой обсуждается поддержка ширины разметки с учетом типов устройств и размеров экрана, преобладающих на рынке.

Использование @-ms-viewport

Простая поддержка для прикрепленного представления. Если ваш веб-сайт совместим с разметкой под ширину 320 пикселей, вы можете выбрать эту настройку для прикрепленного представления. Комбинирование адаптации устройств с медиа-запросами CSS позволяет избирательно отменять функции автоматического масштабирования. Таблица CSS отменяет автоматическое масштабирование по умолчанию, а вместо него задает последовательную ширину разметки 320 пикселей для всех окон шириной 320 пикселей или более узких:

@media screen and (max-width: 320px) <

При ширине окна менее 320 пикселей масштаб контента будет уменьшен, чтобы в окне поместилась вся страница. Например, окно шириной 300 пикселей будет отображать контент в масштабе 93,75%. Для окон большей ширины будет применяться обычное масштабирование Internet Explorer 10 (например, когда для браузера в стиле Metro задана книжная ориентация).

Однако функция адаптации устройств бесполезна в браузерах, которые еще не поддерживают ее. Но в таких браузерах можно воспользоваться поддержкой узкой разметки: в них просто не выполняется автоматическое масштабирование для подгонки контента под размер окна.

Поддержка книжной ориентации. Если ваш веб-сайт поддерживает также разметку шириной 768 пикселей, то можно легко добавить поддержку книжной ориентации с помощью второго правила для окна просмотра:

@media screen and (max-width: 320px) <

@media screen and (min-width: 768px) and (max-width: 959px) <

Рекомендуем вам протестировать свой веб-сайт с шириной разметки 768 пикселей (книжная ориентация на большинстве планшетов) и 320 пикселей (браузер в стиле Metro, прикрепленное представление) в дополнение к ширине 1024 пикселя или больше (альбомная ориентация). Пример правила для окна просмотра в действии можно увидеть в демонстрационном ролике Make it Snappy! на веб-сайте тестирования Internet Explorer.

— Мэтт Ракоу (Matt Rakow), руководитель программы, Internet Explorer

Как при изменении размеров окна браузера сделать так, чтобы та сайт вообще не менялся, т.е. та часть, которая окажется за пределами окна, просто не была видна. Например, у сайта vk.com, да и у большинства, так делается.

я не о фиксированной и резиновой верстке. пример того, что я хотела https://pp.vk.me/c631422/v631422331/30b35/ee0Ehvv26_E.jpg

2 ответа 2

Данное поведение достигается за счет заданной минимальной ширины, с помощью свойства min-width . В случае с Яндекс это min-width: 936px; . Вот пример их CSS:

Ниже приведен полный пример требуемой вами верстки:

Вот такой meta тег запретит мобильным устройствам масштабировать страницу:

А вот эти стили не дадут содержимому страницы сжаться меньше, чем до 1200px по ширине.

Общая ошибка заключается в том, что разработчики часто используют значение initial-scale=1 для неадптивных шаблонов. Такая установка приводит к отрисовке 100% страницы без масштабирования. Если дизайн неадаптивный, то пользователю приходится либо много прокручивать, либо вручную устанавливать масштаб, чтобы увидеть всю страницу. Самый плохой случай — сочетание Таким образом отключается возможность масштабирования на сайте. А без масштабирования нет возможности увидеть всю страницу. Если ваш шаблон не адаптивный,не отключайте масштабирование и не сбрасывайте начальный масштаб!

Ключевое слово здесь user-scalable=no

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css вёрстка или задайте свой вопрос.

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.12.20.35703