как определить размер окна приложения

Как получить размеры экрана, окна и веб-страницы в JavaScript?

Доброго времени суток, друзья!

Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.

Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.

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

Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.

1. Экран

1.1. Размер экрана

Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.

Получить информацию о размере экрана можно с помощью свойства screen объекта window :

1.2. Доступный размер экрана

Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.

Для получения доступного размера экрана снова обращаемся к window.screen :

2. Окно

2.1. Размер внешнего окна (или внешний размер окна)

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

Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :

2.2. Внутренний размер окна (или размер внутреннего окна)

Внутренний размер окна — это ширина и высота области просмотра (вьюпорта).

Объект window предоставляет свойства innerWidth и innerHeight :

Если мы хотим получить внутренний размер окна без полос прокрутки, то делаем следующее:

3. Размер веб-страницы

Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).

Для получения размера веб-страницы используйте следующее (включает в себя внутренние отступы страницы, но не включает границы, внешние отступы и полосы прокрутки):

Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.

4. Заключение

Надеюсь, теперь Вы понимаете, как получать различные размеры.

Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.

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

Наконец, размер веб-страницы — это размер контента.

Источник

Форум

Справочник

Измерения окна, документа и элементов

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

Разрешение экрана

Положение окна браузера

Мнения разработчиков в вопросе какое же свойство должно хранить положение окна относительно верхней левой точки экрана, видимо, разошлись.

Первые два работают в браузерах Mozilla (например Firefox), вторая пара работает в Internet Explorer и Opera. В браузерах, основанных на движке WebKit (например Safari, Chrome), обе пары работают и их значения равны друг другу соответственно.

Но невозможно абсолютно кросс-браузерно определить положение окна, поскольку в разных браузерах отсчет идет до разных точек. Дело в том, что браузеры Internet Explorer и Opera в значениях screenTop и screenLeft хранят координаты левого верхнего угла документа, а не всего окна, поэтому даже при развертывании на весь экран их значения будут не нулевые.

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

Положение окна браузера можно изменить двумя методами:

Размеры окна браузера

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

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

Но это справедливо только для режима следования стандартам (CSS1Compat mode), поэтому приведенный выше код работает верно в этом документе.

Но если у страницы не будет указан doctype, то в некоторых браузерах свойства clientWidth и clientHeight объекта document.documentElement будут иметь значения ширины и высоты всего документа целиком, а не только видимой его части, в то время как document.body.clientWidth и document.body.clientHeight наоборот будут иметь значения размеров вьюпорта.

Размеры окна браузера можно изменить двумя методами:

Скролл окна браузера

Сколлбар имеет несколько параметров: ширина, высота, значение прокрутки сверху, значение прокрутки слева.

Стоит отметить, что как и в случае с размерами вьюпорта, в режиме «quirks mode» не всегда понятно, свойства какого элемента ( documentElement или body ) будут иметь нужные нам значения скролла.

Для того, чтобы убедится в том, что в разных браузерах эти свойства имеют разные значения, можете попробовать выполнить тесты, представленные по этой ссылке, в разных браузерах: http://www.quirksmode.org/viewport/experiments/body.html

В браузерах на движке Mozilla (Firefox) или WebKit (chrome, safari) вы можете воспользоваться свойствами window.scrollY и window.scrollX для определения этих значений. Они будут равны scrollTop и scrollLeft соответственно.

Из скрипта вы можете управлять прокруткой страницы, пользуясь следующими методами (обратите внимание на очередность параметров):

Размеры документа и элементов

Дело в том, что не всегда достаточно узнать какие значения размеров были установлены через стили элемента и особенно это касается «резиновых» элементов (которые растягиваются в зависимости от размеров их содержания), или элементов с фиксированными размерами, но имеющих внутренние отступы.

Для демонстрации, небольшой пример:

Точно так же можно определить размер всего документа, точнее размеры элемента body :

Положение элемента на странице

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

Таким способом можно считать позицию как статичных элементов ( position: static ), так и элементов с абсолютной позицией ( position: absolute ).

Заключение

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

Ожидал увидеть еще способ кросс-браузерного получения координат мыши

Взяв реализацию из jQuery и немного переделав её, получил:

Сам не разбирался еще, что происходит в этом большом выражении, возможно получится упростить

Много полезного, как раз то, что искал. Совсем не то, что ковыряться в Prototype, jQuery или Dojo. Спасибо!

Должен отметить, что функция получения координат элемента относительно верхнего левого угла документа даст неверный результат в IE6, если в цепочке offsetParent попадется элемент с position: relative.

автор пишы исчо это точно:) спс за размеры окна браузера

На основе некоторых идей этой статьи создан основной материал сайта.

Спасибо за статью, Андрей!

Спасибо, всегда путаю, что x (икс) это «left» в переносе на слова.

Классная статья, спасибо!

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

Как узнать ширину и высоту элемента div до его отображения, это реально? Заранее спасибо

Для элемента div
«Элемент с не фиксированной шириной и высотой.
Кликните для появления сообщения.»:
this.offsetWidth (FF3) = 609
this.offsetWidth (Chrome) = 609
this.offsetWidth (opera10) = 613
this.offsetWidth (IE7) = 613
Высота offsetHeight во всех браузерах посчиталась одинаково.

Для body везде получились различные значения высоты.

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

А что вы думаете по поводу такого кроссбраузерного определения размера вьюпорта:

в IE7 не сработал, выдал 0

Я понял. Для IE надо math.max получать. Спасибо

Работает корректно во всех браузерах!
Определяет размер рабочей области окна!
+ размер области документа (с учетом дивов с абсолютным позициониррованием)
+ работает и в ИЕ6 и в Сафари

Снова я, уж простите, доработанная функция:

Норм, хотя когда футер прижат надо под ie8 как минимум перерасчитывать все.

С этой функцией наткнулся на некоторые проблемы, все описать довольно сложно, лучше выложу исправленный код. Буду признателен если кто нибудь найдет баги и отпишет mail@atlas-is.ru. Я тестировал на:
ИЕ6 ИЕ7 опреа9/10 Мазилла 3,6 Safari(win32) Chrome
для всех браузеров было 4 разных ситуации с разными доктайпами и т.д. в моем случае сейчас функция работает безупречно для: определения видимой области окна браузера (с корректным учетом скроллбаров). определения области документа/страницы с учетом всех элементов на странице (даже при абсолютном позиционировании). и смещение скролла.

Надеюсь кому то помог! Потому как сам перерыл огромную кучу информации пока соорудил это.

Спасибо, но для тех, кто не подключал jQuery эту часть кода

Спасибо. Долго искал эту информацию и нашел.

А я уже давно забил на попытки сооружать мегауниверсальные функции. Я следую таким правилам:
— верстаю в xhtml со следующим шаблоном пустого дока:

— если страница верстается php, то конечно же в нем шлется заголовок

(На этой странице такое есть) Ну а слеш в закрывающем теге кто экранировать будет!? Зачем делить слово SCRIPT на две части, если тут же ошибка потяжелее?

проходит валидацию, ессесно работает и ничего не нужно делить. Нужно просто не забыть указать тип скрипта, вставить в нем коменты-ограничители для XML-парсера и экранировать символы / и ‘ в строках.

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

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

1. Виевпорт во всех трех записан и в body, и в html корректно и с вычетом скролбара.

2. Во всех браузерах offsetWidth и offsetHeight что у body, что у html равны размеру виевпорта.

Вот так. Придется обходится высотой html или решать, как обойти проблему его удлинения.

Стоит отметить, что в IE8 (может и других версий) screen.width и window.screen.width возвращают не реальное разрешение экрана, а виртуальное (т.е. при изменении масштаба отображения меняется и разрешение, возвращаемое функциями, например, при помощи Ctrl+колесо мыши).

Доходчиво про ClientX/Y и почему Опера их нормально обрабатывает.

Говорю Спасибо за сайт.
Мне очень помог.

Спасибо за статью! Но нигде не могу найти, как можно (и можно ли вообще) определить расстояние нижней границы элемента до нижней границы окна браузера. Может, кто-нибудь подскажет. Заранее спасибо!

Всем привет, Великолепная фраза

Интересно конечно, но есть много вопросов по теме ИМХО. Давайте обсудим (мыло в подписи) или тут, если не затруднит

помог scrollHeight снять с дива высоту динамически

Источник

Операционная система Microsoft Windows 3.1 для программиста

4.5. Определение размера окна

Программы MS-DOS работали с экраном, который имел фиксированные размеры. В зависимости от видеорежима они использовали либо текстовый экран размером 80 х 25 символов, либо графический экран размером от 640х200 для видеоконтроллеров CGA, до 1024 х 768 или больше для SVGA.

Приложение Windows, как правило, не знает заранее размеров отведенного ей окна (или окон, если их несколько). К тому же в любой момент времени вы можете изменить эти размеры при помощи мыши. Разумеется, приложение может запретить изменять размер окна мышью (указав стиль окна без толстой рамки), но такой подход нельзя приветствовать. Поэтому приложение Windows должно уметь определять размеры своих окон.

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

Приложение WSIZE состоит из трех файлов. Первый файл с именем wsize.cpp (листинг 4.9) создает главное окно приложения и запускает цикл обработки сообщений. Файл wndproc.cpp (листинг 4.10) содержит исходный текст функции окна, выполняющий всю интересную для нас работу по определению и отображению текущих размеров главного окна приложения. И наконец, файл wsize.def (листинг 4.11) является файлом определения модуля для нашего приложения.

Листинг 4.9. Файл wsize\wsize.cpp

Файл wsize.cpp не имеет никаких дополнительных особенностей по сравнению с аналогичными файлами предыдущих приложений. Поэтому мы не будем его описывать, а перейдем сразу к функции окна (листинг 4.10).

Листинг 4.10. Файл wsize\wndproc.cpp

В области данных функции окна определены статические переменные, предназначенные для хранения размера окна и способа изменения этих размеров (о способах изменения размеров окна мы расскажем немного позже):

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

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

Окно создается функцией CreateWindow. При этом функция окна получает следующие сообщения:

Обычно все эти сообщения (кроме последнего) передаются функции DefWindowProc. В некоторых случаях, когда с окном связаны структуры данных, требующие инициализации при создании окна, функция окна перехватывает сообщение WM_CREATE, определяя по нему момент завершения создания окна и выполняя собственные инициализирующие действия.

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

Все эти сообщения, кроме двух последних, обычно передаются функции DefWindowProc. Если функция окна должна реагировать на изменение размеров или расположения окна, она должна обрабатывать сообщения WM_SIZE и WM_MOVE.

При вызове функции UpdateWindow функция окна получает единственное сообщение WM_PAINT (только в том случае, если окно содержит области, помеченные для обновления).

Так как при отображении окна функцией ShowWindow функция окна получает в числе прочих сообщение WM_SIZE, и наше приложение WSIZE его обрабатывает, мы можем инициализировать переменные fwSizeType, nWidth и nHeight до прихода сообщения WM_PAINT, что мы и делаем в нашем обработчике сообщения WM_SIZE:

Как мы говорили раньше, вместе с сообщением обычно приходит дополнительная информация, которая передается функции окна через параметры wParam и lParam. До сих пор мы игнорировали эту информацию. Теперь она нам нужна, так как новые размеры окна передаются функции окна вместе с сообщением WM_SIZE именно через параметры wParam и lParam.

Через параметр lParam передается два значения. В операционной системе Windows версии 3.1 эти значения соответствуют младшему и старшему слову lParam. Для обеспечения совместимости со следующими версиями Windows не следует самостоятельно извлекать эти два значения. Нужно пользоваться специально предназначенными для этого макросами LOWORD и HIWORD. Эти макросы определены в файле windows.h:

Параметры сообщения WM_SIZE описывают новый размер окна и способ, которым окно изменило свой размер:

Параметр wParam может принимать одно из нескольких значений, символические имена которых начинаются с префикса SIZE_ и определены в файле windows.h следующим образом:

0

1

2

3

4

После сохранения параметров сообщения WM_SIZE функция окна нашего приложения посылает сама себе сообщение WM_PAINT. Для этого при помощи функции InvalidateRect она объявляет все окно как требующее обновления и затем вызывает функцию UpdateWindow:

Функция InvalidateRect добавляет прямоугольную область, заданную в качестве параметра, к областям окна, требующим обновления (перерисовки). Эта функция имеет следующий прототип:

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

Третий параметр указывает, нужно ли при обновлении стирать фон окна. Если указать значение TRUE, фон окна будет стерт. Для того чтобы оставить фон окна без изменения, укажите в качестве третьего параметра значение FALSE.

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

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

Функция GetClientRect предназначена для определения координат внутренней области окна и имеет следующий прототип:

Первый параметр функции (hwnd) определяет идентификатор окна, для которого требуется определить координаты внутренней области.

Второй параметр (lprc) является дальним указателем на структуру типа RECT, в которую записываются координаты внутренней области окна. Эти координаты вычисляются относительно левого верхнего угла внутренней области окна, поэтому в полях left и top структуры RECT всегда записываются нулевые значения. Поля right и bottom содержат соответственно ширину и высоту внутренней области окна.

На рис. 4.1 показан внешний вид главного окна приложения WSIZE после того, как в нем щелкнули левой клавишей мыши.

Рис. 4.1. Главное окно приложения WSIZE

Из рисунка видно, что оба способа определения размера окна (при обработке сообщения WM_SIZE и при помощи функции GetClientRect) дали одинаковые результаты.

Файл определения модуля, который был использован при создании приложения WSIZE, не имеет никаких особенностей и приведен в листинге 4.11.

Источник

Адаптация под различные экраны приложений Windows Store

Заметил, что у разработчиков возникает множество вопросов по поводу адаптации приложения под экраны различного размера. Для того чтобы была возможность предоставить ссылку, по которой есть необходимая информация, я и решил написать этот небольшой материал. Рассматривать буду не только приложения под Windows 8.1, будет затронута и разработка приложений Windows 10 UWP.

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

Коэффициент масштабирования — это соотношение реальных пикселей устройства и отображаемых. При расчете этого коэффициента учитывается также стандартная дистанция, с которой пользователи смотрят на экран устройства.
В приложениях под Windows 8.1 поддерживается три коэффициента масштабирования: 100%, 140% и 180%. У Windows Phone 8.1 приложений различных коэффициентов масштабирования больше.
В эмуляторе Windows Store приложений, при изменении разрешения экрана вы можете увидеть и само разрешение, и значение коэффициента масштабирования рядом.

Процесс адаптации изображений похож на локализацию изображений. Для того, чтобы для различных разрешений брался верный вариант картинки необходимо внутри папки images создать 3 папки с именами: scale-100, scale-140, scale-180. Внутрь этих папок уже и добавляем изображения с одинаковыми названиями.

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

Соответственно, вам нужно будет создать 3 версии изображения. Если ваше стандартное изображение имеет 200 пикселей в ширину, то для масштабирования 140% нужно будет умножить ширину на 1,4. То есть вам нужно будет создать такое же изображение 280 пикселей в ширину. Ну и для масштабирования 180% нужно будет иметь такое же изображение шириной 200*1,8=360 пикселей.
Во время выполнения приложения оптимальное изображение выбирается автоматически, в зависимости от того, какое разрешение экрана у пользователя.
Если вы задаете файл изображения из кода, то вывести картинку верного разрешения вам может помочь следующий официальный сниппет, который исходя из значения DisplayInformation.GetForCurrentView().ResolutionScale определяет текущий коэффициент масштабирования экрана:

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

Адаптация макета приложения под размер экрана
Если содержимое вашего приложения размещено в элементе-контейнере Viewbox, то при изменении размера экрана ваше содержимое будет автоматически растянуто и масштабировано с целью заполнить все доступное пространство. Для того, чтобы растровые изображения при таком увеличении выглядели прилично, необходимо добавить несколько вариантов различного размера, как мы это только что рассматривали.
Размещение приложения внутри Viewbox – это один из предлагаемых вариантов адаптации приложения под различные экраны. Другим вариантом может быть скрытие элементов приложения или изменение их размеров. Рассмотрим работу с различными размерами приложения на примере режима snap.
Стандартно приложение Windows 8.1 может быть минимум 500 пикселей в ширину. В случае, если ваше приложение хорошо будет выглядеть и при более узком виде, либо его вполне можно использовать с другими приложениями, а также если желательно оставлять его как можно дольше в рабочем положении – вы можете установить ему минимальной шириной 320 пикселей. Сделать это можно, указав в редакторе манифеста минимальную ширину 320 или добавив в код манифеста атрибут MinWidth со значением width320 (кстати, в Windows 8 приложениях режим snap был как раз 320 пикселей)

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

Но так делать можно в небольших приложениях, в которых вам не будет трудно перебрать все существующие контролы в коде C#. Для нормальных приложений лучше всего изменения внешнего вида хранить в XAML VisualState состояниях. Таким образом, можно предоставить дизайнеру возможность комфортного изменения макета в Blend. Следующий пример содержит те же изменения, что и предыдущий код:

Теперь в событии изменения размера окна мы можем перейти к нужному состоянию (в зависимости от текущего размера экрана):

Здесь для получения размера экрана в ширину и высоту мы опять использовали параметр SizeChangedEventArgs e.
В любой другой момент выполнения программы, ширину и высоту видимого окна приложения (так называемые эффективные пиксели, которые не зависят от размера экрана устройства) можно получить так:
Кроме эффективных пикселей есть еще и raw пиксели (англ. raw — сырой, необработанный) – реальное количество точек на экране или физические пиксели. Например, если экран устройства 1080 пикселей в ширину, то и количество raw пикселей будет 1080 по горизонтали.

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

Что по поводу приложений универсальной платформы Windows?

Универсальные приложения Windows 8.1 уже предоставляли нам возможность сделать свою отдельную XAML раскладку для WP и для Store. На следующем скриншоте два MainPage.xaml файла:

В приложениях UWP нам будет доступна возможность создать множество XAML файлов с представлениями внешнего вида приложения и выбрать нужный из них, в зависимости от различных факторов (размер экрана, разрешение и т.п.). Давайте попробуем.
Создадим в проекте директорию DeviceFamily-Mobile.
Кликнем на ней правой кнопкой мыши и выберем пункт Add new item
Из вариантов нам нужно выбрать XAML View и назвать наше представление так же, как и называется то представление, которое мы хотим заменить. В простом случае это может быть MainPage.xaml.
Теперь тот XAML код, который мы внесем в файл MainPage.xaml, расположенный в папке DeviceFamily-Mobile будет отображен на мобильных устройствах. На десктопах же и иных устройствах будет отображен дизайн приложения из основного MainPage.

RelativePanel
Теперь нам стал доступен новый контрол RelativePanel, который позволяет создавать взаимосвязи положений между своими дочерними элементами.
Например, следующий код:
задает оранжевой кнопке положение под светло синей:

Пример взят отсюда.

AdaptiveTrigger
Windows 10 приложения не только поддерживают VisualState состояния, но и расширяют их новым функционалом. Во первых, теперь стало можно использовать триггеры для UI. А во-вторых, VisualStateManager теперь поддерживает Setters. Теперь отпала необходимость создавать 0-секундную анимацию (даже более того – устарела). Благодаря этому код становится более читаемым. Сравните следующий пример с примером, который мы рассматривали ранее:

Обратите внимание на строку Здесь задается значение минимальной ширины окна приложения, при котором сработает триггер. Далее с помощью Setters задается цвет для состояния. Весь этот код означает, что при изменении ширины приложения, в случае если ширина становится шире чем 600 пикселей цветом Layout становится зеленый.

Замечательная статья (англоязычная), из которой я взял это пример находится здесь.

Device preview toolbar
В Windows 10 ожидается расширение возможностей масштабирования приложений. Уже сейчас вы можете протестировать отображение внешнего вида вашего XAML кода на различных устройствах, используя device preview toolbar:

Обратите внимание на скриншот. Вы можете заметить, что Windows 10 приложения поддерживают гораздо больше коэффициентов масштабирования, чем приложения Windows 8.1. Вот табличка с презентации BUILD 2015, сравнивающая возможности масштабирования различных платформ:

Как вы можете заметить Windows 10 приложения на высоте – они самые «скалистые».

Что-то еще? Узнаем совсем скоро, ведь совсем не за горами 20-ое июля — дата релиза Visual Studio 2015, а там до 29-ого июля и выхода Windows 10 уже рукой подать.

Источник