4 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Размеры экрана и точки остановаScreen sizes and breakpoints

Размеры экрана и точки останова Screen sizes and breakpoints

Приложения для Windows могут работать на любом устройстве под управлением Windows, в том числе на телефонах, планшетах, настольных компьютерах, телевизорах и т. п. Windows apps can run on any device running Windows, which includes phones, tablets, desktops, TVs, and more. Из-за большого количества целевых устройств и экранов разного размера в экосистеме Windows 10 мы рекомендуем не оптимизировать пользовательский интерфейс для каждого устройства, а проектировать приложения для нескольких ключевых категорий ширины экрана (также называемых «точки прерывания»): With a huge number of device targets and screen sizes across the Windows 10 ecosystem, rather than optimizing your UI for each device, we recommended designing for a few key width categories (also called «breakpoints»):

  • небольшая (менее 640 пикселей); Small (smaller than 640px)
  • средняя (641–1007 пикселей); Medium (641px to 1007px)
  • большая (1008 пикселей и более). Large (1008px and larger)

При разработке под определенные точки прерывания учитывайте количество экранного пространства, доступного для приложения (окно приложения), а не размер экрана. When designing for specific breakpoints, design for the amount of screen space available to your app (the app’s window), not the screen size. Когда приложение работает в полноэкранном режиме, окно приложения соответствует размеру экрана, но если приложение работает не в полноэкранном режиме, окно меньше экрана. When the app is running full-screen, the app window is the same size as the screen, but when the app is not full-screen, the window is smaller than the screen.

Присоединяйтесь к обсуждению

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

Похожий контент

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

Вопрос вроде не сложный, но я что-то запутался…

Читал http://developer.android.com/design/style/iconography.html, но так и не понял какой размер использовать для иконок.

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

Из статьи я понял, что иконки могут быть:
MDPI: 32×32 HDPI: 48×48 XHDPI: 64×64 XXHDPI: 96×96 Но все 4-и вида запихнуть в один листбокситем нельзя. Поэтому и возник вопрос.

Я пришёл к выводу, что лучше использовать для иконки xxhdpi: 96×96, т.е. максимальный размер, предположив, что на большом или маленьком разрешении она будет ресайзиться сама. Правильно ли я всё понял? Если да, то тогда я не понимаю зачем делать(в том числе и гугл) 4-е вида иконок, если можно сделать одну xxhdpi: 96×96.

P.S. Очень нужно понять это, т.к. для приложения, которое я пишу, нужно нарисовать иконки (делаю это впервые). Жаль, что гугл даёт так мало стандартных иконок и в паке нет даже простейшей иконки файла.
P.S.2 Решил использовать пока HDPI: 48×48 (http://developer.android.com/design/style/metrics-grids.html)

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

Например, если раньше на iPhone 3 при размере экрана 3,5 дюйма позволял отобразить 320х480 точек, то на устройстве iPhone 4 при таком же физическом размере экрана, экран мог уже отображать 640х960 точек. Это хорошо видно на увеличенном изображении обычного экрана и ретина экрана на рисунке ниже (слева — не ретина, справа — ретина (2х)). Справа количество физических точек ровно в четыре раза больше, чем слева:

Для разработчика это могло означать, что интерфейс привязанный к разрешению 320х480 на Retina экране будет занимать только четверть экрана. Естественно, что использование разрешения экрана в физических координатах не удобно с этой точки зрения. Именно по этому появились логические координаты, которые гарантируют, что тот же пользовательский интерфейс для iPhone 3, будет иметь такие же размеры (физические) и на экране с ретиной.

Читать еще:  PlayerPro Music Player 5.4 build 192 [Paid]

FireMonkey работает в логических координатах. Это означает, что на iPhone 3 — 4 мы работаем с логическим разрешением 320×480 точек. Однако, при отображении интерфейса на iPhone 4 c (с двойной плотностью пикселей по сравнению с iPhone 3), интерфейс автоматически масштабируется на физическое разрешение 640х960 с коэффициентом масштабирования равным 2.

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

Код ниже показывает, как получить доступ к этому сервису и извлечь требуемые параметры:
var ScreenService: IFMXScreenService; LogicScreenSize: TPoint; ScreenScale: Single; begin // Запрашиваем сервис экрана, для получения информации о размере и текущем коэффициенте масштабирования if TPlatformServices.Current.SupportsPlatformService(IFMXScreenService, IInterface(ScreenService)) then begin LogicScreenSize := ScreenService.GetScreenSize.Round; ScreenScale := ScreenService.GetScreenScale; LabelLogicScreenSize.Text := Format(‘Логический размер: %d, %d’, [LogicScreenSize.X, LogicScreenSize.Y]); LabelPhysicScreenSize.Text := Format(‘Физический размер: %f, %f’, [LogicScreenSize.X * ScreenScale, LogicScreenSize.Y * ScreenScale]); LabelScreenScale.Text := Format(‘Коэффициент масштабирования: %f’,[ScreenService.GetScreenScale]); end; end; Результат кода приведен на снимке экранов ниже для iPad устройств с ретиной экраном и без:

Последние посетители 0 пользователей онлайн

Ни одного зарегистрированного пользователя не просматривает данную страницу

Вы похоже, не совсем точно представляете как работает оконная система Android’а

XML это ваши пожелания как бы вы хотели, чтобы выглядел экран. Далее начинается развертка ваших хотелок на физическом экране. Развертка выполняется в 2 этапа:

  1. Делается замер размеров с учетом пожеланий указанных в XML и ограничений заданных родителем. Это часть выполняется методом View.measure() , метод вызывает onMeasure() , который может быть перехвачен разработчиком.
  2. Далее присваиваются актуальные размеры вычисленные в ходе measure/onMeasure() — это производится методом View.layout() , в ходе присвоения размеров вызывается onLayout() , который также может быть перехвачен.

Замер размеров и присвоение происходит динамически то есть runtime, соответственно, отсутствует способ задать статические размеры в XML.

Динамически найти размеры экрана устройства не представляет никакой сложности, код типа:

Эти размеры по идее вы должны использовать в onMeasure()/onLayout() , для того чтобы придать желаемый размер вашему кастомному View

Погуглите на тему custom+view+android

Работа с px не рекомендуется, это где такое сказано? Любые динамические манипуляции в коде будут проходить в px, поэтому зачастую перед более большим проектом пишется утилита, которая генерирует px -> dp, для удобной работы, но по факту, ‘почти’ все динамические измерения в px. Что касается вопроса, библиотека и получения размеров это две разные вещи, библиотека для того и нужна чтоб, не получать эти размеры, а смело ставить проценты, а она в коробке сама считает все остальное. Ну а если вы уже вытащили размеры вашего парента, не надо много ума, чтоб разделить этот размер на размер вашего элемента и получить те же самые проценты, или поставить процент от вашего размера, чтоб задать нужный размер уже в пикселях, ну или если вернутся в начало можно использовать свою утиль, чтоб удобно ставить в % а на выходе иметь dp.

PS Bonus: В такой ситуации рекомендую использовать FrameLayout, он хорошо подойдет именно для таких манипуляций, а для списков может дать значительный прирост производительности, парой очень большой. Такие примеры можно увидеть в глобальных OpenSource, в топовых мессенджерах и файлменеджерах.

Определение поддерживаемых экранных размеров в манифесте

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

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

Атрибут anyDensity говорит о том, каким образом ваше приложение будет масштабироваться при отображении на устройствах с разной плотностью пикселов. Если вы учитываете это свойство экрана в своем интерфейсе, установите этому атрибуту значение true. При значении false Android будет использовать режим совместимости, пытаясь корректно масштабировать пользовательский интерфейс приложения. Как правило, это снижает качество изображения и приводит к артефактам при масштабировании. Для приложений, собранных с помощью SDK с API level 4 и выше, этот атрибут по умолчанию имеет значение true.

Читать еще:  Firmware Finder for Huawei

Оптимальный размер экрана и расстояние просмотра

Разрешение человеческого глаза (со зрением 20/20 ) составляет около одной угловой минуты . Для полного разрешения HDTV эта одна угловая минута означает, что телезритель должен сидеть в 4 раза выше экрана. На этом расстоянии невозможно разрешить отдельные пиксели, одновременно увеличивая область просмотра. Таким образом, идеальный размер набора можно определить из таблицы ниже, измерив расстояние от места, где наблюдатель будет сидеть до экрана, в сантиметрах (или дюймах), разделив его на 4 и сравнив с высотой экрана ниже. На этом расстоянии зрители с зрением лучше, чем 20/20, по-прежнему смогут видеть отдельные пиксели.

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

Как получить размеры экрана, окна и веб-страницы в 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. Заключение

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

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

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

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

Что такое разрешение экрана монитора?

Разрешение экрана — это размер изображения, которое вы видите на своем мониторе, исчисляемый в точках (пикселях). Проще говоря, разрешение — это плотность этих точек на вашем экране в данный момент времени. Эта плотность измеряется по ширине и высоте экрана. Соответственно, чуть выше вы можете видеть результаты автоматического определения разршения вашего экрана. Первая цифра говорит о том, сколько пикселей сейчас отображается от левой до правой границы дисплея, а вторая цифра — от верхней до нижней границы. Узнать текущее разрешение вашего монитора и поменять его можно в настройках операционной системы. Чем оно больше — тем выше четкость и тем большее количество объектов можно отобразить на мониторе одновременно.

Реализация: сервис и компонент

Теперь у нас есть практически готовый код компонента. Поэтому приступим к реализации сервиса изменения размера окна просмотра.

Пояснение к коду:

  1. Создаем объект rxjs resizeSubject .
  2. Метод onResize получает size в качестве параметра. Затем он отправит значение в поток. Мы вызовем этот метод позже в компоненте size-detector .
  3. Мы используем оператор DifferentUntilChanged , чтобы сократить количество ненужных уведомлений. Например, когда размер экрана изменяется с 200 на 300 пикселей, в bootstrap он все равно считается размером xs . В этом случае уведомления не нужны.
  4. Экспортируем поток изменения размера через onResize$ . Любые компоненты, службы, директивы и т.д. могут подписаться на этот поток, чтобы получать уведомления при изменении размера экрана.
Читать еще:  Полный обзор сервиса Orbot — РЕАЛЬНО ли он анонимный?

Теперь вернемся к компоненту size-detector и обновим логику detectScreenSize .

  1. В компонент нужно добавить ElementRef и недавно созданный элемент ResizeService .
  2. В любой момент времени будет виден только один HTML-элемент. Перебираем массив sizes и находим его.
  3. Для каждого размера из массива sizes используем селектор запросов элемента HTML5 , чтобы найти элемент по уникальному классу CSS, который мы определили ранее в is- .
  4. Как только находим текущий видимый элемент, вызываем метод onResize и тем самым уведомляем службу ресайзинга.

Присоединяйтесь к обсуждению

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

Похожий контент

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

Вопрос вроде не сложный, но я что-то запутался…

Читал http://developer.android.com/design/style/iconography.html, но так и не понял какой размер использовать для иконок.

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

Из статьи я понял, что иконки могут быть:
MDPI: 32×32 HDPI: 48×48 XHDPI: 64×64 XXHDPI: 96×96 Но все 4-и вида запихнуть в один листбокситем нельзя. Поэтому и возник вопрос.

Я пришёл к выводу, что лучше использовать для иконки xxhdpi: 96×96, т.е. максимальный размер, предположив, что на большом или маленьком разрешении она будет ресайзиться сама. Правильно ли я всё понял? Если да, то тогда я не понимаю зачем делать(в том числе и гугл) 4-е вида иконок, если можно сделать одну xxhdpi: 96×96.

P.S. Очень нужно понять это, т.к. для приложения, которое я пишу, нужно нарисовать иконки (делаю это впервые). Жаль, что гугл даёт так мало стандартных иконок и в паке нет даже простейшей иконки файла.
P.S.2 Решил использовать пока HDPI: 48×48 (http://developer.android.com/design/style/metrics-grids.html)

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

Например, если раньше на iPhone 3 при размере экрана 3,5 дюйма позволял отобразить 320х480 точек, то на устройстве iPhone 4 при таком же физическом размере экрана, экран мог уже отображать 640х960 точек. Это хорошо видно на увеличенном изображении обычного экрана и ретина экрана на рисунке ниже (слева — не ретина, справа — ретина (2х)). Справа количество физических точек ровно в четыре раза больше, чем слева:

Для разработчика это могло означать, что интерфейс привязанный к разрешению 320х480 на Retina экране будет занимать только четверть экрана. Естественно, что использование разрешения экрана в физических координатах не удобно с этой точки зрения. Именно по этому появились логические координаты, которые гарантируют, что тот же пользовательский интерфейс для iPhone 3, будет иметь такие же размеры (физические) и на экране с ретиной.

FireMonkey работает в логических координатах. Это означает, что на iPhone 3 — 4 мы работаем с логическим разрешением 320×480 точек. Однако, при отображении интерфейса на iPhone 4 c (с двойной плотностью пикселей по сравнению с iPhone 3), интерфейс автоматически масштабируется на физическое разрешение 640х960 с коэффициентом масштабирования равным 2.

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

Код ниже показывает, как получить доступ к этому сервису и извлечь требуемые параметры:
var ScreenService: IFMXScreenService; LogicScreenSize: TPoint; ScreenScale: Single; begin // Запрашиваем сервис экрана, для получения информации о размере и текущем коэффициенте масштабирования if TPlatformServices.Current.SupportsPlatformService(IFMXScreenService, IInterface(ScreenService)) then begin LogicScreenSize := ScreenService.GetScreenSize.Round; ScreenScale := ScreenService.GetScreenScale; LabelLogicScreenSize.Text := Format(‘Логический размер: %d, %d’, [LogicScreenSize.X, LogicScreenSize.Y]); LabelPhysicScreenSize.Text := Format(‘Физический размер: %f, %f’, [LogicScreenSize.X * ScreenScale, LogicScreenSize.Y * ScreenScale]); LabelScreenScale.Text := Format(‘Коэффициент масштабирования: %f’,[ScreenService.GetScreenScale]); end; end; Результат кода приведен на снимке экранов ниже для iPad устройств с ретиной экраном и без:

Последние посетители 0 пользователей онлайн

Ни одного зарегистрированного пользователя не просматривает данную страницу

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector