Как iOS приложения адаптируются к разным размерам экрана iPhone 12

За последние несколько лет я написал несколько статей, показывающих, как приложения iOS, созданные с использованием разных версий Xcode, будут отображаться при запуске на устройствах с iOS, которые еще не существовали на момент создания приложений. Как правило, приложения следует создавать, используя последнюю версию Xcode, чтобы была возможность использовать предпросмотр для разрешений экрана всех устройств, включая самые новые. Старые приложения запускаются на новых устройствах, но выглядят ужасно. Иногда некоторые элементы приложения выходят за пределы экрана, или приложения выглядят как вытянутые в столбик и/или масштабированные версии этих же приложений для более старых устройств. Опыт, описанный в тех статьях, доказывает, что старые приложения никогда корректно не запускаются с теми разрешениями экрана, которых не существовало при их создании.

На WWDC 2019: 224 Modernizing Your UI for iOS 13 спикер, рассказывая о новых особенностях совместимости приложений, заявил:

“Раньше, если мы создавали новые устройства с новыми разрешениями экрана, ваши приложения отображались некорректно. Что ж, мы изменили это. Таким образом, если ваше приложение создано с использованием iOS 13 SDK, оно всегда будет отображаться с правильным полным разрешением экрана.”

В тот момент я думал, это означает, что мне никогда больше не придется писать статьи по этой теме. Новые iPhone 12 отображают приложения с разным разрешением в зависимости от того, с какой версией Xcode они были созданы. Отменила ли Apple это решение или это относится только к новым разрешениям iPad?

На мероприятии в октябре 2020 года Apple анонсировала четыре новые модели iPhone 12: iPhone 12 mini, iPhone 12, iPhone 12 Pro и iPhone 12 Pro Max. iPhone 12 и 12 Pro имеют одинаковое разрешение экрана и ведут себя идентично. Получается, что при разработке приложений нужно учитывать только три разрешения экрана.

iPhone 12 mini 5.4" with 1080×2340 pixels
iPhone 12 / 12 Pro 6.1" with 1170×2532 pixels
iPhone 12 Pro Max 6.7" with 1284×2778 pixels

Ни одно из этих разрешений не соответствует существующим разрешениям устройств. У iPhone 12 mini есть еще один сюрприз. Как и в случае с iPhone 6+, 6S +, 7+ и 8+, приложение, работающее на iPhone 12 mini, выполняет рендеринг с разрешением, отличным от того, что на самом деле будет отображается на экране.

Прежде чем изучать особенности новых устройств, стоит еще раз взглянуть на поведение некоторых из существующих. Я думаю, что iPhone SE второго поколения, 11 Pro и 11 Pro Max являются наиболее подходящими моделями для сравнения с новыми моделями. В отличие от предыдущих статей этой серии, я также рассматриваю Display Zoom (для усложнения своей задачи и увеличения времени на создание всех этих снимков экрана!)

iPhone SE второго поколения

IPhone SE второго поколения имеет такие же размеры как iPhone 6, 6s, 7 and 8. Следовательно, и ведет он себя точно так же.

Стандартное разрешение

iPhone SE второго поколения имеет разрешение 375 × 667 поинтов.

Xcode 12.1 build of Adaptivity on 2nd generation iPhone SE running iOS 14.1 in portrait

Xcode 12.1 build of Adaptivity on 2nd generation iPhone SE running iOS 14.1 in landscape

Display Zoom

При включенном Display Zoom, iPhone SE второго поколения показывает увеличенное разрешение iPhone SE первого поколения - 320 × 568 поинтов. Такое же разрешение, как у iPhone 5 и 5S. Однако обратите внимание, что высота панели навигации составляет 112 поинтов, что на 1 поинт больше, чем у реального iPhone SE.

Xcode 12.1 build of Adaptivity on 2nd generation iPhone SE running iOS 14.1 in portrait with Display Zoom

Xcode 12.1 build of Adaptivity on 2nd generation iPhone SE running iOS 14.1 in landscape with Display Zoom

iPhone 11 Pro

iPhone 11 Pro имеет такие же размеры и ведет себя так же, как iPhone X и XS.

Стандартное разрешение

iPhone 11 Pro имеет исходное разрешение 375 × 812 поинтов.

Xcode 12.1 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in portrait

Xcode 12.1 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in landscape

Display Zoom

При включенном Display Zoom, iPhone 11 Pro показывает увеличенное разрешение 320 × 693 поинта, если приложение создано с помощью Xcode 12.0 или новее. Это не соответствует ни одному предыдущему устройству. Обратите внимание, что верхняя и нижняя панели немного меньше в поинтах, чем при стандартном масштабировании.

Xcode 12.0 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in portrait with Display Zoom

Xcode 12.0 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in landscape with Display Zoom

iPhone 11 Pro не поддерживает Display Zoom на iOS 13. При сборке с Xcode 11 (т. е. связанным с iOS 13) iPhone 11 Pro с использованием Display Zoom показывает увеличенное, некорректное изображение с разрешением iPhone SE первого поколения (320 × 568 поинтов). Это доказывает, что приложение не видит разрешение экрана, несуществующее в iOS 13. Приложение считает, что статус бар имеет высоту 20 поинтов (как на реальном iPhone SE первого поколения), но iOS продолжает выводить время и другие параметры на самый верх экрана.

Xcode 11.7 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in portrait with Display Zoom

Xcode 11.7 build of Adaptivity on iPhone 11 Pro running iOS 14.1 in landscape with Display Zoom

iPhone 11 Pro Max

iPhone 11 Pro Max имеет тот же размер и поведение, как и iPhone XS Max. IPhone 11 и XR имеют немного другой физический размер и плотность пикселей 2x вместо 3x, но имеют такое же разрешение в поинтах и могут считаться функционально эквивалентными iPhone 11 Pro Max.

Стандартное разрешение

iPhone 11 Pro Max имеет исходное разрешение 414 × 896 поинтов. Высота “моноброви” такая же, как на iPhone 11 Pro.

Xcode 12.1 build of Adaptivity on iPhone 11 Pro Max running iOS 14.1 in portrait

Xcode 12.1 build of Adaptivity on iPhone 11 Pro Max running iOS 14.1 in landscape

Display Zoom

При включенном Display Zoom, iPhone 11 Pro Max показывает увеличенное разрешение iPhone 11 Pro, равное 375 × 812 поинтам. В отличие от iPhone 11 Pro, iPhone 11 Pro Max действительно поддерживает Display Zoom в iOS 13. Приложения, созданные в Xcode 11, будут иметь такое же разрешение на iPhone 11 Pro, что и приложения, созданные в Xcode 12. Опять же, верхняя и нижняя панели немного отличаются по размеру от реального iPhone 11 Pro. Статус бар на 4 поинта короче, а нижняя панель на 3 поинта короче, что дает на 7 поинтов больше вертикальной области для содержимого, чем на iPhone 11 Pro.

Xcode 12.1 build of Adaptivity on iPhone 11 Pro Max running iOS 14.1 in portrait with Display Zoom

Xcode 12.1 build of Adaptivity on iPhone 11 Pro Max running iOS 14.1 in landscape with Display Zoom

iPhone 12 mini

Стандартное разрешение

Экран 1080 × 2340 пикселей предполагает новое разрешение 360 × 780 поинтов, но iPhone 12 mini фактически выдает уменьшенное разрешение iPhone 11 Pro, равное 375 × 812 поинтам. Это означает, что iPhone 12 mini не вводит в разработку приложений новое разрешение. Однако, поскольку реальное физическое количество пикселей не кратно разрешению в поинтах, не получится избежать некоторых артефактов масштабирования. Надеюсь, с 3x экраном они будут незаметны. Статус бар на 6 поинтов выше, чем у iPhone 11 Pro. Нижняя строка имеет такую же высоту.

Xcode 12.1 build of Adaptivity on iPhone 12 mini running iOS 14.1 in portrait

Xcode 12.1 build of Adaptivity on iPhone 12 mini running iOS 14.1 in landscape

Display Zoom

Поскольку iPhone 12 mini ведет себя так же, как и iPhone 11 Pro, то при включенном Display Zoom iPhone 12 mini показывает увеличенное разрешение 320 × 693 поинтов, если приложение создано с использованием Xcode 12.0 и новее. Статус бар на 5 поинтов выше, чем у iPhone 11 Pro с включенным Display Zoom. Нижняя панель имеет такую же высоту.

Xcode 12.0 build of Adaptivity on iPhone 12 mini running iOS 14.1 in portrait with Display Zoom

Xcode 12.0 build of Adaptivity on iPhone 12 mini running iOS 14.1 in landscape with Display Zoom

При сборке с использованием Xcode 11 iPhone 12 mini с включенным Display Zoom выдает увеличенное изображение, такое же, как на iPhone SE первого поколения с разрешением 320 × 568 поинта. iPhone 11 Pro с включенным Display Zoom выдает такое же разрешение.

Xcode 11.7 build of Adaptivity on iPhone 12 mini running iOS 14.1 in portrait with Display Zoom

Xcode 11.7 build of Adaptivity on iPhone 12 mini running iOS 14.1 in landscape with Display Zoom

iPhone 12 / 12 Pro

Стандартное разрешение

В отличие от iPhone 12 mini, iPhone 12 и 12 Pro имеют совершенно новое исходное разрешение - 390 × 844 поинта. Поскольку данное разрешение не встречалось ранее на других устройствах, для возможности использовать предпросмотр в этом разрешении, приложения следует создавать с использованием Xcode 12.1 или новее. Обратите внимание, что в альбомной ориентации горизонтальные размеры меньше (так же, как у iPhone 11 Pro и устройств меньшего размера). Статус бар больше на 3 поинта в сравнении с iPhone 11 Pro. Нижняя панель не изменилась.

Xcode 12.1 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in portrait

 

Xcode 12.1 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in landscape

Приложения, созданные в Xcode 12.0 и новее, при запуске предпросмотра iPhone 12 или 12 Pro с исходным разрешением, будут использовать увеличенное до 375 × 812 поинтов разрешение iPhone 11 Pro. На этот раз верхняя и нижняя панель такой же высоты, как на настоящем iPhone 11 Pro!

Xcode 12.0 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in portrait

Xcode 12.0 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in landscape

Display Zoom

При включенном Display Zoom, iPhone 12 и 12 Pro выдают увеличенное разрешение 320 × 693 поинта, если приложение создано в Xcode 12.0 или новее. Это то же разрешение, что и у iPhone 11 Pro и iPhone 12 mini с включенным Display Zoom. Верхняя панель на 1 поинт выше, чем у эквивалентного iPhone 11 Pro с включенным Display Zoom, а нижняя панель на 1 поинт ниже.

Xcode 12.0 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in portrait with Display Zooom

 

Xcode 12.0 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in landscape with Display Zooom

При создании приложения в Xcode 11 iPhone 12 и 12 Pro с включенным Display Zoom выдают такое же увеличенное изображение, что и iPhone SE первого поколения с разрешением 320 × 568 поинта. Такое же разрешение выдают iPhone 11 Pro и iPhone 12 mini при включенном Display Zoom.

Xcode 11.7 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in portrait with Display Zoom

 

Xcode 11.7 build of Adaptivity on iPhone 12 Pro running iOS 14.1 in landscape with Display Zooom

iPhone 12 Pro Max

Стандартное разрешение

Как и iPhone 12 и 12 Pro, iPhone 12 Pro Max вводит совершенно новое разрешение 428 × 926 поинта. Поскольку это разрешение ранее не встречалось, для использования предпросмотров с этим разрешением, приложения следует создавать в Xcode 12.1 или новее. Верхняя панель на 3 поинта выше, чем у iPhone 11 Pro Max. Нижняя панель не изменилась.

Xcode 12.1 build of Adaptivity on iPhone 12 Pro Max running iOS 14.1 in portrait

Обратите внимание, что в альбомной ориентации размеры по горизонтали стандартные (такие же, как и у меньшего iPhone 11 Pro Max).

Xcode 12.1 build of Adaptivity on iPhone 12 Pro Max running iOS 14.1 in landscape

Приложения, созданные в Xcode 12.0 или в более ранней версии, будут выдавать увеличенное до 414 × 896 поинтов стандартное разрешение iPhone 11 Pro Max. Панели такой же высоты, как и на iPhone 11 Pro Max.

Xcode 12.0 build of Adaptivity on iPhone 12 Pro Max running iOS 14.1 in portrait

Xcode 12.0 build of Adaptivity on iPhone 12 Pro Max running iOS 14.1 in landscape

Display Zoom

При включенном Display Zoom iPhone 12 Pro Max выдает увеличенное разрешение iPhone 11 Pro, равное 375 × 812 поинтам. Статус бар на 3 поинта короче, а нижняя панель на 4 поинта короче, что дает на 7 поинтов больше вертикальной области для содержимого, чем на iPhone 11 Pro.

Xcode 12.1 build of Adaptivity on iPhone 12 Pro Max running iOS 14.1 in portrait with Display Zoom

 

Xcode 12.1 build of Adaptivity on iPhone 12 Pro Max running iOS 14.1 in landscape with Display Zoom

Вывод

У Apple много опыта в обеспечении обратной совместимости с существующими приложениями при выпуске новых устройств или версий iOS. Линейка iPhone 12 не является исключением (кроме iPhone 12 mini, который всегда имеет разрешение iPhone 11 Pro, масштабируемое по размеру экрана). Высота панелей при масштабировании не всегда соответствует реальному физическому устройству, поэтому обратная совместимость срабатывает не на все 100%. Чтобы иметь возможность использовать новые разрешения iPhone 12/12 Pro и 12 Pro Max в предпросмотре, приложения должны быть созданы с использованием Xcode 12.1.

Display Zoom обычно выдает увеличенную версию меньшего разрешения существующего устройства. Исключениями являются iPhone X, XS и 11 Pro, которые не поддерживали масштабирование дисплея до iOS 14. Они выдают новое разрешение 320 × 693 поинта при использовании Xcode 12 (т.е. по сравнению с iOS 14) и разрешение 320 × 568 поинта при использовании Xcode 11.

Как я запускал приложения Xcode 11 / iOS 13 на симуляторах iOS 14.1?

Вам может быть интересно, как мне удалось сделать снимки экрана с симуляторов Xcode 12.1 / iOS 14.1 с приложениями, созданными с помощью Xcode 11. В моей предыдущей статье iPad Navigation Bar and Toolbar Height Changes в iOS 12 этот процесс объясняется в разделе «Подождите, что вы сказали?».

Adaptivity

Скриншоты в этой статье были взяты из приложения Adaptivity. Adaptivity - это инструмент для разработчиков и дизайнеров, позволяющий визуализировать различные размеры экрана, поля макета, высоту полей и размеры динамического типа, которые современное адаптивное приложение iOS использует при работе на разных устройствах и в многозадачных размерах iPad. Есть также инструменты для просмотра системных цветов, системных изображений и системных материалов, а также инструменты для изучения взаимодействий Pointer Interactions iPadOS 13.4.
Это универсальное приложение является хорошей покупкой и включает в себя версию Mac Catalyst.

Оригинал статьи