Создайте адаптивное приложение с uikit для iOS

iPhone 6+, 6s+, 7+, 8+

Размер экрана мобильного телефона и планшет

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

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

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

Параллельно с размером, соотношение экраны (отношение высоты/ширины) также развивались с течением времени. Это развитие в основном связано с демократизацией «безграничных» мобильных телефонов, то есть без пограничных или приемных кнопок.

Экран больше, но он также более удлиненный (и с округленными углами). Формат постепенно увеличивался с классического 16/9 до 19.5/9. Вы также заметите, что на многих моделях (в частности, iPhone) часть поверхности дисплея от глиняния сверху на ступеньку («Нотч»), которая включает в себя датчики, динамик и фронтальная камера.

Размер смартфона

В разделах ниже есть Представитель панели размеров экрана Самые популярные модели iOS и Android (в частности, Apple iPhone и Samsung Galaxy Dranges).

Спецификации экрана основных моделей

По простоте, верхняя выемка (выемка) была представлена ​​одинаковым способом на каждом визуальном виде, но может быть различным в зависимости от версий (12, 13, 14, максимума, профессионала, больше и т. Д.))).

Модель	Размер (дюйм)	Размер (см)	Определение (пиксели)	Разрешение (ГЧП)
Айфон 6	4.7 “	11,9 см	1334 x 750 px	326 стр
iPhone 6s	4.7 “	11,9 см	1334 x 750 px	326 стр
iPhone 7	4.7 “	11,9 см	1334 x 750 px	326 стр
iPhone 8	4.7 “	11,9 см	1334 x 750 px	326 стр
iPhone 6 Plus	5,5 “	14 см	1920 x 1080 px	401 ppi
iPhone 6s Plus	5,5 “	14 см	1920 x 1080 px	401 ppi
iPhone 7 Plus	5,5 “	14 см	1920 x 1080 px	401 ppi
iPhone 8 Plus	5,5 “	14 см	1920 x 1080 px	401 ppi
iPhone x	5.8 “	14,7 см	2436 x 1125 px	458 ppi
iPhone xs	5.8 “	14,7 см	2436 x 1125 px	458 ppi
iPhone 11 Pro	5.8 “	14,7 см	2436 x 1125 px	458 ppi
iPhone xr	6.1 “	15,5 см	1792 x 828 px	326 стр
iPhone 11	6.1 “	15,5 см	1792 x 828 px	326 стр
iPhone XS Макс	6.5 “	16,5 см	2688 x 1242 px	458 ppi
iPhone 11 Pro Max	6.5 “	16,5 см	2688 x 1242 px	458 ppi
iPhone 12/13 (mini)	5.4 “	13,7 см	2340 x 1080 px	476 ППС
iPhone 12/13 (Pro и Standard) / 14	6.1 “	15,5 см	2352 x 1170 px	460 ppi
iPhone 14 Pro	6.1 “	15,5 см	2556 x 1179 px	460 ppi
iPhone 12/13 (Pro Max) / 14 Plus	6.7 “	17 см	2778 x 1284 px	458 ppi
iPhone 14 Pro Max	6.7 “	17 см	2796 x 1290 px	460 ppi

Указанная длина соответствует длине диагонали (в дюймах и см).

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

С критериями фильтрации (сайт Baker)
Что такое резолюция ГЧП ?

это о плотность пикселей экрана. Блок ГЧП действительно означает Пиксель на дюйм (На английском PPI, пиксели на дюйм). Таким образом, это значение указывает количество пикселей на большом пальце длины (2.54 см). Чем выше он, тем точнее будет дисплей.

Текущие экраны смартфонов (например, сетчатка Apple) имеют очень высокое разрешение, а пиксели, как правило, неотличимы.

Для получения дополнительной информации см. Определение и страницу разрешения экрана.

Спецификации экрана основных моделей

Модель	Размер (дюйм)	Размер (см)	Определение (пиксели)	Разрешение (ГЧП)
Галактика S8	5.8 “	14,7 см	2960 x 1440 px	~ 570 ppi
Галактика S9	5.8 “	14,7 см	2960 x 1440 px	~ 570 ppi
Galaxy S10e	5.8 “	14,7 см	2280 x 1080 px	~ 438 PPI
Галактика S10	6.1 “	15,5 см	3040 x 1440 px	~ 550 ppi
Галактика S8+	6.2 “	15,7 см	2960 x 1440 px	~ 529 ППС
Галактика S9+	6.2 “	15,7 см	2960 x 1440 px	~ 529 ППС
Galaxy S20	6.2 “	15,7 см	3200 x 1440 px	~ 563 PPP
Galaxy S21 5G	6.2 “	15,7 см	2400 x 1080 px	~ 421 PPP
Галактика S10+	6.4 “	16,3 см	3040 x 1440 px	~ 522 PPP
Galaxy S10 5G	6.7 “	17 см	3040 x 1440 px	~ 505 ppi
Galaxy S20+	6.7 “	17 см	3200 x 1440 px	~ 525 ppi
Galaxy S21+ 5G	6.7 “	17 см	2400 x 1080 px	~ 394 PPP
Galaxy S21 Ultra 5G	6.8 “	17,3 см	3200 x 1440 px	~ 515 PPI
Galaxy S20 Ultra	6.9 “	17,5 см	3200 x 1440 px	~ 511 PPP
Galaxy S22/S23	6.1 “	15,5 см	2340 x 1080 px	~ 422 PPP
Galaxy S22+/S23+	6.6 “	16,8 см	2340 x 1080 px	~ 390 ppi
Galaxy S22 Ultra/S23 Ultra	6.8 “	17,3 см	3088 x 1440 px	~ 501 ppi

Указанная длина соответствует длине диагонали (в дюймах и см).

Как и его конкурент Apple, Samsung предоставляет смартфоны компаратор (сайт Samsung.com) для просмотра различий между их различными моделями (спецификации экрана, а также память, процессор, измерения и т. Д.))). К сожалению, вы найдете только их последние продукты.

С критериями фильтрации (сайт Baker)

Спецификации основных моделей

Модель	Размер (дюйм)	Размер (см)	Определение (пиксели)	Разрешение (ГЧП)
Redmi 9	6,53 “	16,6 см	2340 x 1080 px	~ 394 PPP
Redmi (примечание) 10/10 с	6.5 “	16,5 см	2400 x 1080 px	~ 405 ppi
Redmi Note 11/11s	6.43 “	16,3 см	2400 x 1080 px	~ 409 PPP
Redmi Note 11 Pro / Pro+	6,67 “	16,9 см	2400 x 1080 px	~ 395 ppi
Xiaomi 12/12x	6,28 “	16 см	2400 x 1080 px	~ 419 PPP
Xiaomi 12 Pro / 13 Pro	6.73 “	17,1 см	3200 x 1440 px	~ 522 PPP
Xiaomi 13	6.36 “	16,2 см	2400 x 1080 px	~ 414 PPP

Указанная длина соответствует длине диагонали (в дюймах и см).

Чтобы увидеть все технические характеристики смартфонов Xiaomi (диапазон относительно широкий), обратитесь к информационной странице их сайта в MI.компонент.

С критериями фильтрации (сайт Baker)

Спецификации основных моделей

Модель	Размер (дюйм)	Размер (см)	Определение (пиксели)	Разрешение (ГЧП)
P30	6.1 “	15,5 см	2340 x 1080 px	~ 422 PPP
P40	6.1 “	15,5 см	2340 x 1080 px	~ 422 PPP
P30 Lite	6.15 “	15,6 см	2312 x 1080 px	~ 415 PPP
P40 Lite	6.4 “	16,3 см	2310 x 1080 px	~ 398 PPI
P30 Pro	6,47 “	16,4 см	2340 x 1080 px	~ 398 PPI
P40 Pro	6,58 “	16,7 см	2640 x 1200 px	~ 441 PPP
P60 Pro	6,67 “	16,9 см	2700 x 1200 px	~ 443 ppi
Новая 9	6,57 “	16,7 см	2340 x 1080 px	~ 392 ППС
Nova 9 есть	6,78 “	17,2 см	2388 x 1080 px	~ 387 ppi
Mate 50 Pro	6.74 “	17,1 см	2616 x 1212 px	~ 428 ppi
Mate X3 (развернут)	7,85 “	19,9 см	2496 x 2224 px	~ 426 PPP

Указанная длина соответствует длине диагонали (в дюймах и см).

Чтобы узнать больше о размерах и/или технических характеристиках (размеры, память, процессор, батарея, фото -датчики и т. Д.), вы можете использовать инструмент сравнения Huawei (на их сайте).

С критериями фильтрации (сайт Baker)

Размер планшета

Вы найдете ниже размеров экрана наиболее распространенных планшетов на рынке (Apple iPad и Samsung Galaxy Tab). Может быть несколько вариантов этих моделей, но характеристики, как правило, похожи.

Спецификации основных моделей

Модель	Размер (дюйм)	Размер (см)	Определение (пиксели)	Разрешение (ГЧП)
iPad mini (6 -е поколение.)))	8.3 “	21,1 см	2266 x 1488 px	326 стр
iPad (9 -е поколение.)))	10.2 “	25,9 см	2160 x 1620 пк	264 ППС
iPad (10 -е поколение.)))	10.9 “	27,7 см	2360 x 1640 px	264 ППС
iPad Air (5 -е поколение.)))	10.9 “	27,7 см	2360 x 1640 px	264 ППС
iPad Pro 11 “(4 -й Gen.)))	11 “	27,9 см	2388 x 1668 px	264 ППС
iPad Pro 12.9 “(6 -е поколение.)))	12,9 “	32,8 см	2732 x 2048 px	264 ППС

Указанная длина соответствует длине диагонали (в дюймах и см).

Для получения более подробной информации о различных моделях iPad (полные характеристики), не стесняйтесь использовать компаратор iPad (на Apple.com). Вы найдете все визуальные эффекты, вариации по цвету и полные технические характеристики.

С критериями фильтрации (сайт Baker)

Спецификации основных моделей

Модель	Размер (дюйм)	Размер (см)	Определение (пиксели)	Разрешение (ГЧП)
Galaxy Tab A7 Lite	8.7 “	22,1 см	1340 x 800 px	~ 179 ППС
Galaxy Tab A8	10.5 “	26,7 см	1920 x 1200 px	~ 216 PPP
Galaxy Tab S7 / S8	11 “	27,9 см	2560 x 1600 px	~ 274 PPP
Galaxy Tab S7+ / S8+	12.4 “	31,5 см	2800 x 1752 PX	~ 266 PPP
Galaxy Tab S8 Ultra	14.6 “	37,1 см	2960 x 1848 PX	~ 239 ГЧП

Создайте адаптивное приложение с uikit для iOS

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

Задерживать размеры экрана

Мы обычно говорим о размерах экрана в дюйм (отметил ‘), и мы Измерьте диагональ.

В iOS есть две большие семьи размеров:

• размеры iPhone;
• Размеры iPad.

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

Устройство

Размер

iPad pro big 1, 2

iPad pro small 2

iPad pro small 1

iPhone Pro Max 12, 13

iPhone 11 Pro Max

iPhone 11, 12, 13

iPhone Pro 12, 13

iPhone 6+, 6s+, 7+, 8+

iPhone 6, 6s, 7, 8

Эта таблица суммирует Двенадцать размеров Существует в семье iOS с исчерпывающим списком всех связанных устройств iOS. Вам не нужно, чтобы вы все знали это наизусть. Знайте только, что есть шесть размеров для iPhone и шесть для iPad. И эти двенадцать размеров, вы можете визуализировать их все в раскадровке !

Визуализируйте размеры в раскадровке

Чтобы изменить размер интерфейса в раскадровке, используйте селектор размеров. В нижней части слева от раскадровки у вас есть следующая кнопка:

Нажмите на него, чтобы показать селектор размера.

Здесь вы можете выбрать размер, который вы хотите отобразить интерфейсы своей раскадровки. По умолчанию размер – это размер iPhone 8 Plus, но вы можете изменить это по желанию.

Я приглашаю вас немного поиграть с разными размерами. Есть три возможные настройки:

Размер

Размер экрана позволяет просто выбрать размер экрана, который вы хотите просмотреть.

Для iPhone есть восемь размеров, но для iPad есть только один размер ! Они забыли?

Хорошо видно ! С двенадцатью размерами Apple Apple хотела избежать отображения слишком длинного списка. Но попробуйте нажать на iPad справа от списка, он будет мгновенно обновлен, отображая доступные iPad, Magic !

Руководство

Вы можете решить отобразить ландшафт или ориентацию на портретов, применив вращение на дисплей:

Приспособление

Если вы выберете один из iPad в селекторе, доступна третья настройка: адаптация.

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

В итоге

• Есть двенадцать различных размеров экрана для устройств iOS: четыре для iPad и восемь для iPhone.
• Как и в режиме предварительного просмотра, в предыдущей главе селектор размера позволяет визуализировать то, что ваше приложение дает на разных устройствах непосредственно в раскадровании. И вы можете видеть, что, как только мы покинем iPhone 8 Plus, это не очень убедительно !

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