Не масштабируется размер окна

Содержание
  1. Как изменить размеры окна
  2. Как увеличить или уменьшить масштаб экрана на компьютере с Windows 7/10
  3. Инструменты для изменения масштаба экрана в Windows 7/10
  4. Горячие клавиши для уменьшения/увеличения масштаба экрана
  5. Удобные сторонние программы для управления параметрами экрана
  6. ZoomIT
  7. Carroll
  8. Тег viewport: как настроить область просмотра в адаптивном дизайне
  9. Экран и область просмотра в адаптивном дизайне
  10. Как работает мета-тег viewport
  11. Мета-тег «viewport» и CSS правило @viewport
  12. Как и где указывать тег «viewport»
  13. Как настроить размер окна просмотра
  14. Атрибут «width»
  15. Какие значения масштаба использовать
  16. Как использовать медиазапросы CSS
  17. Как настроить отображение в зависимости от ориентации дисплея
  18. Атрибут «initial-scale=1»
  19. Атрибуты «maximum-scale», «minimum-scale» и «user-scalable»
  20. Аналоги для правила @viewport
  21. Дескриптор «orientation»
  22. Медиазапросы и «device-width»
  23. Атрибуты «height» и «device-height»
  24. Если шаблон неадаптивный
  25. Если не использовать «viewport»
  26. Проверить мобилопригодность страницы
  27. Материалы и руководства для веб-мастеров

Как изменить размеры окна

Как изменить размеры окна? Пользователь Windows может произвольно изменять размеры окна приложений при помощи мыши или клавиатуры. Изменение размеров окон может быть полезно, например, в случае если вы хотите разместить в рабочем пространстве Windows сразу несколько расположенных рядом окон приложений и переключаться между ними одним щелчком мыши.

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

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

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

2. Нажмите и удерживайте левую кнопку мыши, после чего перетаскивайте границу окна в требуемом направлении.

3. Отпустите левую кнопку мыши по завершении масштабирования окна.

Изменить размер окна можно и при помощи клавиатуры. Для этого:

1. Откройте управляющее меню программы либо однократным щелчком мыши на значке программы в левой части панели заголовка, либо нажатием на клавиатуре сочетания клавиш Alt+Space.

2. Выберите в управляющем меню пункт Размер. Этот пункт будет недоступен, если текущее окно приложения развернуто во весь экран.

3. Изменяйте масштаб окна при помощи клавиш управления курсором (стрелочки). По завершении масштабирования нажмите клавишу Enter.

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

Источник

Как увеличить или уменьшить масштаб экрана на компьютере с Windows 7/10

Для современных операционных систем очень важно, чтобы их интерфейс был как можно более простым, понятным и удобным. А еще он должен быть настраиваемым. Настройка интерфейса включает множество аспектов, например, масштабирование и изменение разрешения экрана. Зачем это нужно, объяснять излишне. Всем известно, насколько утомительным может быть чтение мелкого шрифта, то же самое касается мелких элементов интерфейса – кнопок, значков, панелей, меню и так далее. Противоположная ситуация, когда неудобства доставляют слишком большие элементы интерфейса. Вот почему в Windows разработчиками Microsoft была предусмотрена возможность изменять масштаб экрана и отдельных компонентов.

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

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

Инструменты для изменения масштаба экрана в Windows 7/10

Между масштабированием в Windows 10 и 7/8.1 есть небольшие отличия. Сначала посмотрим, как изменить масштаб экрана на компьютере Windows 10. Для этого откройте приложение «Параметры» и перейдите в раздел «Дисплей», который позволяет задать разрешение и выполнить масштабирование. По умолчанию масштаб выставлен 100%, но в выпадающем меню вы можете выбрать 125%, увеличив тем самым размер всех элементов интерфейса.

Если этого мало, кликните по ссылке «Настраиваемое масштабирование» и задайте свой коэффициент, после чего перезайдите в учетную запись. Увлекаться, однако, не стоит, так как если вы слишком сильно увеличите масштаб, то работать будет совершенно точно неудобно. Что получится при установке масштаба 500%, хорошо демонстрирует этот скриншот.

Поддерживает Windows 10 и масштабирование отдельных элементов, но с этим не всё однозначно. Такая опция присутствовала в ранних сборках «десятки», затем она была удалена, в осеннем обновлении 1809 снова восстановлена, но в урезанном виде, позволяющем масштабировать только текст. Доступ к указанному функционалу открывается из раздела Специальные возможности – Дисплей.

В Windows 7 и 8.1 функции масштабирования в таком виде, в каком она присутствует в Windows 10, нет. Здесь интерфейс масштабируется путем изменения размера всех элементов рабочего стола или только шрифта. Если у Вас Windows 8.1 или Windows 7, кликните по рабочему столу ПКМ, выберите в меню «Разрешение экрана», в новом окне нажмите «Изменение размеров текста и других элементов» и установите нужный масштаб – мелкий, средний или крупный. Также можно нажать ссылку «Пользовательские параметры» и установить масштабирование в процентном соотношении.

Читайте также:  Чем обезжирить поверхность окон пвх

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

С увеличением все понятно, а как уменьшить масштаб экрана на компьютере? К сожалению, в Microsoft уменьшение всех без исключения элементов рабочего пространства посчитали нецелесообразным. Глобально изменять масштаб в отрицательную сторону Windows не позволяет, но ничто не мешает уменьшить размер шрифтов и пиктограмм файлов, либо попробовать понизить разрешение самого экрана.

Горячие клавиши для уменьшения/увеличения масштаба экрана

Останавливаться на изменении разрешения дисплея мы не будем, тут всё и так должно быть понятно, а если нет, то смотрите скриншоты выше. Теперь же посмотрим, как уменьшить или увеличить масштаб экрана на ноутбуке с помощью клавиатуры. Если кликнуть в пустой области Проводника ПКМ, то можно изменить размер пиктограмм, установив крупные, обычные или мелкие значки. То же самое делается с помощью комбинации Ctrl + колесико мыши. Прокрутка колесиком вверх с зажатой Ctrl увеличивает масштаб значков, прокрутка вниз уменьшает значки. Этот способ масштабирования неполный, так как значки панели задач, панели переходов, меню, текст и прочие элементы остаются в неизменном виде.

Следует учесть, что прокрутка колесиком с зажатой Ctrl мыши в окне Проводника помимо всего прочего меняет режим отображения элементов. Так, если вы продолжите прокручивать колесико вниз после того, как был достигнут минимальный размер пиктограмм, будет включен режим «Список», затем «Таблица», «Плитка» и «Содержимое». На некоторых моделях ноутбуков и компьютеров для подобного масштабирования можно использовать комбинацию Ctrl + и Ctrl —. Эта же комбинация применяется для масштабирования интерфейса в большинстве браузеров.

Удобные сторонние программы для управления параметрами экрана

Поскольку изменить масштаб экрана в Windows можно средствами самой системы, использование сторонних приложений не дает в этом плане особых преимуществ, если только не считать более удобного доступа к самим опциям масштабирования. Впрочем, при определенных обстоятельствах некоторые программы могут оказаться весьма полезными. Если вы ищете способ, как увеличить масштаб экрана на компьютере с помощью сторонних инструментов, советуем обратить внимание на утилиты ZoomIT и Carroll.

ZoomIT

Эта небольшая утилита предназначена для масштабирования произвольных областей экрана. Работает она по тому же принципу, что и штатная Лупа, но при этом гораздо удобнее и функциональнее. ZoomIT поддерживает масштабирование до 400%, рисование на экране, установку на экран заставки с таймером в 10 минут. Комбинация Ctrl + 1 включает рисовалку, Ctrl + 3 – десятиминутную заставку, Ctrl + 4 – масштабирование. Как и в случае применения лупы, качество изображения при использовании ZoomIT теряется.

Carroll

Простая программа для управления разрешением монитора. В принципе, поскольку она дублирует функционал Windows, ее можно было бы считать бесполезной, если бы не пара «но». Во-первых, приложение обеспечивает более быстрый и удобный доступ к стандартным шаблонам разрешений, во-вторых, позволяет задать предпочитаемое разрешение для каждого отдельного пользователя. Включается эта функция нажатием «Change screen resolution and restore with every logon…».

Итог

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

Источник

Тег viewport: как настроить область просмотра в адаптивном дизайне

Как настроить область просмотра в адаптивном дизайне с помощью мета-тега “viewport” или CSS правила @viewport и что делать, если анализ не видит “viewport”.

Экран и область просмотра в адаптивном дизайне

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

Для мобильного просмотра веб-мастеры в зависимости от потребностей бизнеса выбирают способ отображения сайта: разрабатывают отдельную мобильную версию, делают адаптивную верстку или динамическую — RESS (Responsive Design + Server Side). Для корректного отображения проекта на разных моделях планшетов и десктопов также нужен адаптив под разные разрешения.

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

  • диагональ экрана — размер дисплея в дюймах, измеряется от угла к углу;
  • размер экрана в точках — количество точек, их устройство использует для координат;
  • полное число пикселей (Rendered Pixels), которое визуализирует устройство. Значение считают с помощью множителя 1x, 2x, 3x, который устройство использует к размеру экрана в точках;
  • физические пиксели — фактическое разрешение экрана в пикселях; в экранах Retina, которые используют современные модели техники Apple, более высокое разрешение изображения на экране с меньшим количеством физических пикселей.
Читайте также:  Монтаж окон при обшивке сайдингом

К примеру, возьмем смартфоны: у IPhone 3 с диагональю 3.5″ физическое разрешение экрана 320x480px, а плотность пикселей 163ppi. Разрешение соответствует диагонали, плотность пикселей невысокая. Если отобразить на нем текст, набранный размером 16px, он будет читаться так же хорошо, как и на экране компьютера. Модель IPhone 6 Plus с дисплеем Retina использует более высокое разрешение изображения на экране с меньшим количеством физических пикселей, полноэкранное изображение — 1242x2208px.

Из-за высокой плотности пикселей тот же текст, набранный в размере 16px, будет выглядеть на экране IPhone 6 Plus значительно мельче, чем на дисплее IPhone 3 . Чтобы сделать страницу с таким текстом пригодной для чтения, нужно отмасштабировать ее, увеличив в три раза.

Отношение пикселей зависит от плотности дисплея:

  • плотность менее 200 DPI (точек на дюйм) — соотношение 1.0;
  • от 200 до 300 DPI — 1.5.
  • более 300 DPI — соотношение представляет собой плотность/150 точек на дюйм.

В основе адаптивного дизайна лежат принципы подвижности и пропорциональности. Веб-мастеры создают макеты в высоком разрешении, располагая контент по модульной сетке из 12, 16 или 24 колонок Bootstrap , и используют адаптивную верстку. Сервер отправляет одинаковый HTML-код на все устройства, но размеры элементов CSS масштабирует под устройства с помощью CSS-правила @viewport и мета-тега «viewport» в HTML. Это позволяет добиться четких изображений и читабельного текста.

Адаптивность есть во всех современных требованиях к PSD-макетам сайта. Пример требований by andrey-hohlov на GitHub.

Как работает мета-тег viewport

Viewport — это видимая пользователю область страницы сайта без прокруток.

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

Мета-тег «viewport» и CSS правило @viewport

Правило @viewport разработала компания Windows, сейчас оно поддерживается несколькими браузерами, но ожидается, что станет будущим стандартом для веб.

Разработчики контролируют масштаб отображения страницы сайта в окне устройства с помощью мета-тега «viewport» или правила @viewport , которое управляет масштабированием с помощью CSS. Тег используют для адаптивных сайтов и для ресурсов с фиксированной или гибкой разметкой в том числе.

Справа мобилопригодная страница с тегом «viewport», в котором указана область просмотра страницы — она равна ширине экрана. Пользователь не масштабирует страницу и видит контент в удобном для чтения размере, блоки контента смещены так, что горизонтальной прокрутки нет.

Как и где указывать тег «viewport»

Страницы сайта должны корректно отображаться на разных дисплеях, для этого в HTML-страницу нужно включить мета-тег «viewport», а в CSS добавить правило @viewport.

Мета-тег «viewport» размещают в блок в таком виде:

Особенности поддержки правила @viewport браузерами есть в спецификации . Пока оно мало распространено, но скорее всего станет стандартом в CSS.

Сейчас к правилу @viewport рекомендуют добавлять вендорный префикс:

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

Атрибут «width»

Атрибут «width» адаптирует ширину окна просмотра к экрану устройства. Указывают либо целое неотрицательное значение от 200px до 10 000px, либо константу «device-width» — она означает, что устройство масштабирует ширину страницы под размер экрана.

Веб-мастер может установить конкретное число пикселей в этом атрибуте, к примеру, width=600. Так делают, если макет должен быть не менее 600px шириной. Если экран окажется больше, браузер не будет увеличивать масштаб, а станет расширять область просмотра, чтобы она растянулась до размеров экрана.

К примеру, на большинстве смартфонов действует стандарт «device-width» в 320px. Если пользователь смотрит сайт с мобильного устройства дисплеем 640px, изображение шириной 320px займет весь экран, используя удвоенное количество пикселей. Поскольку экран использует удвоенную плотность пикселей по сравнению со стандартным монитором, текст на маленьком экране будет казаться четче.

Какие значения масштаба использовать

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

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

Веб-мастеру будет сложно работать с сайтом, если он задался целью определить контрольные точки на макете для разных классов и моделей устройств. Список размеров экранов мобильных устройств и планшетов насчитывает 286 элементов, вместо этого достаточно вписать относительные величины в процентах. Если для блока верхнего уровня установить параметр «width=100%», на любом устройстве он поместится в экран и не будет слишком маленьким или слишком большим.

Как использовать медиазапросы CSS

Для улучшения отображения на разных экранах в правило @viewport добавляют медиазапросы — фильтры, которые позволяют изменять стили CSS на основании характеристик устройства: ориентации, параметров экрана, ориентации и типа устройства.

С помощью медиазапросов CSS веб-мастер может настроить отображение стилей в зависимости от размера экрана устройства. Для этого применяют код:

@media (query) <
/* CSS Rules used when query matches */
>

В адаптивном дизайне применяют функции:

  • «min-width» — применимо к браузеру, ширина которого больше, чем указано в запросе;
  • «max-width» — к браузеру, ширина которого меньше;
  • «min-height» — к браузеру, высота которого больше значения, указанного в запросе;
  • «max-height» — к браузеру, высота которого меньше.
Читайте также:  Дизайн офисов без окон

Если устройство имеет диапазон разрешения от 640 до 1024px, указанное правило @viewport будет масштабировать окно до 640px:

К примеру, установим значения:

При ширине браузера от 0 до 640px применяется max-640px.css.

При ширине браузера 500-600px применяются стили из @media.

При ширине браузера 640px и выше применяется min-640px.css.

Если в браузере ширина больше высоты — горизонтальная ориентация, применяется landscape.css.

Если в браузере высота больше ширины — вертикальная ориентация, применяется portrait.css.

Код для этих значений будет выглядеть так:

Как настроить отображение в зависимости от ориентации дисплея

Атрибут «initial-scale=1»

Некоторые браузеры при изменении ориентации с вертикальной на горизонтальную увеличивают масштаб. Атрибутом «initial-scale=1» указывают браузеру соотношение пикселей CSS и устройства независимо от ориентации дисплея, в соотношении один к одному. В ориентации по горизонтали страница будет выглядеть лучше. Атрибут может иметь значение от 0.1 до 10, 1.0 означает «не масштабировать».

Атрибуты «maximum-scale», «minimum-scale» и «user-scalable»

Кроме настройки «initial-scale» у разработчика есть возможность настроить атрибуты «maximum-scale», «minimum-scale» и «user-scalable». Они ограничивают масштабирование страницы пользователем или вовсе запрещают его.

«maximum-scale» и «minimum-scale» определяют максимальный и минимальный масштаб окна. Могут иметь значения от от 0.1 до 10, 1.0 означает «не масштабировать».

Атрибут «maximum-scale=1» при переключении ориентации оставит настройки масштаба неизменными:

«user-scalable» определяет, может ли пользователь изменять масштаб. Он имеет значение «no» или «yes», по умолчанию стоит «yes».

Аналоги для правила @viewport

У «initial-scale» в мета-теге есть аналоги для правила @viewport — это дескрипторы «zoom», «max-zoom» и «min-zoom», они работают также.

Свойство «user-scalable» в HTML имеет эквивалент «user-zoom» в CSS:

Дескриптор «orientation»

Ориентацией документа в @viewport можно управлять с помощью дескриптора «orientation». У него есть три значения:

  • auto — ориентация на основе положения устройства;
  • landscape — горизонтальная ориентация;
  • portrait — вертикальная ориентация.

По умолчанию установлено значение auto.

Медиазапросы и «device-width»

Google в руководстве для веб-мастеров предлагает комбинировать значения «device-width» с медиа-запросами и настраивать макет в зависимости от ориентации устройства:

@media screen and (min-width:480px) and (max-width:800px) <
/* Target landscape smartphones, portrait tablets, narrow desktops
*/
>
@media screen and (max-width:479px) <
/* Target portrait smartphones */
>

Этот код позволяет настроить изменение сайта в зависимости от горизонтальной или вертикальной ориентации страницы, не указывая конкретные размеры в пикселях:

@media all and (orientation: landscape) <
/* Target device in landscape mode */
>
@media all and (orientation: portrait) <
/* Target device in portrait mode */
>

Атрибуты «height» и «device-height»

Если на сайте есть элементы, которые меняют свой размер в зависимости от высоты окна просмотра контента, в мета-теге применяют атрибут «height» — он определяет высоту Viewport. Указывают целое неотрицательное значение «height» от 223px до 10000px или константу «device-height».

Если шаблон неадаптивный

Не рекомендуют использовать «initial-scale=1» для неадаптивных шаблонов — с такой установкой страница будет отображаться в масштабе 100%, в неадаптивном дизайне пользователю придется устанавливать масштаб вручную или прокручивать.

Не используйте «user-scalable=no» или «initial-scale=1» вместе с «maximum-scale=1» на неадаптивных шаблонах — это отключит масштабирование страницы, а без него пользователь не сможет увидеть всю страницу сайта.

Если не использовать «viewport»

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

Такие страницы поисковики не будут считать адаптивными, а значит не дадут им высокие позиции в топе. Высокий процент отказов поисковики расценят как сигнал бесполезности сайта. Мобилопригодность важна при ранжировании в Яндексе и Google. В 2016 году в Яндексе появился алгоритм «Владивосток» , в 2018 «Андромеда» , а Google в 2018 году заявил, что мобильный индекс будет в приоритете и для мобильной, и для десктопной выдачи. На начало 2019 перевод в мобильный индекс еще не завершен до конца.

Поисковики распознают адаптивный дизайн сайта, если у робота будет доступ к ресурсам страницы — CSS, JavaScript и изображениям. Убедитесь, что доступ в файле robots.txt открыт.

Проверить мобилопригодность страницы

Протестировать, адаптирована ли страница для мобильного просмотра, можно с помощью теста от Google . Он определит мобилопригодность и перечислит ошибки, которые нужно исправить.

Отображение на мобильных устройствах в числе прочих тестов покажет «Анализ сайта» от PR-CY . Он оценит мобилопригодность по нескольким параметрам, покажет область просмотра на экране и даст советы по исправлению ошибок.

Мета-тег «viewport» не входит в официальные стандарты, но общепризнан, его поддерживают большинство браузеров и используют многие сайты. Работа с этим тегом описана в том числе в документации Apple и в документации Android для разработчиков.

Материалы и руководства для веб-мастеров

  • Требования к PSD-макетам сайта by andrey-hohlov на GitHub.
  • Правило @viewport в справочнике CSS
  • Спецификация @viewport
  • Мета-тег «viewport» в справочнике HTML
  • Руководство для веб-мастеров от Google
  • Список размеров экранов мобильных устройств и планшетов
  • Документация для разработчиков Apple и Android

Сайты, не адаптированные для устройств с разными экранами, теряют большую часть трафика. Адаптивным будет сайт, если его контент удобно просматривать с любого устройства — для этого разработчики размечают область просмотра с помощью мета-тега «viewport» в HTML, а в CSS иногда добавляют правило @viewport.

Источник

Поделиться с друзьями