iPhone X - последняя модель из серии iPhone от Apple, представленная в сентябре 2017 года. Этот уникальный и выразительный телефон поступит в продажу по всему миру с 3 ноября.

С первого взгляда вы заметите, что этот телефон, особенно его экран, полностью изменил форму существующих iPhone.

  1. Сверху на нем есть выемка.
  2. Закругленные углы.
  3. Внизу всегда присутствует черная полоса.

Эти изменения коснутся всего дизайна пользовательского интерфейса и его реализаций, включая веб, Cordova и нативные приложения. Таким образом, разработчикам приходится иметь дело с изменениями / адаптациями специально для iPhone X. В этой статье я расскажу о необходимых изменениях. для iPhone X.

Попутно я расскажу, как создавать приложения Vue, подобные нативным приложениям для iPhone X, используя Пользовательский интерфейс Onsen, который недавно поддерживал iPhone X.

TL;DR

  • Если вы видите слева / справа белые пустые области в веб-приложениях или приложениях Cordova в ландшафтном режиме iPhone X Safari, вы можете удалить их, установив viewport-fit=cover или body { background-color: black; }.
  • Если выемка, закругленные углы или нижняя панель iPhone X конфликтуют с содержимым страницы в вашем веб-приложении или приложении Cordova, вы должны установить соответствующие margin и padding в крайние поля. (Если вы используете пользовательский интерфейс Onsen, это можно сделать, добавив атрибуты onsflag-iphonex-portrait и onsflag-iphonex-landscape к элементу html.)
  • Если вы видите черные пустые области в приложении Cordova на iPhone X, вы можете удалить их, включив заставку на основе раскадровки с помощью cordova-plugin-splashscreen или предоставив iPhone X-size (2436 x 1242 пикселей) изображение заставки.
  • Исходный код примера доступен в этом репозитории GitHub.

Эта статья разделена на две основные части:

  • ЧАСТЬ I: создание нативных веб-приложений для iPhone X
  • ЧАСТЬ II. Создание приложений, похожих на нативные, с помощью Cordova для iPhone X

ЧАСТЬ I. Создание веб-приложений, похожих на нативные, для iPhone X

В случае веб-приложений поддержка iPhone X означает поддержку iPhone X Safari.

Но что произойдет, если мы покажем веб-приложения в сафари iPhone X?

Настроить веб-приложение

Прежде всего, давайте создадим веб-приложение. Для более плавного объяснения я собираюсь реализовать шаблон Панель вкладок, наиболее распространенный шаблон в приложениях для iOS.

Для его реализации выбрал Onsen UI. Onsen UI - это библиотека с открытым исходным кодом, содержащая набор компонентов iOS и Android для приложений Vue.

Версии пакетов NPM, которые мы будем использовать, показаны ниже:

(1) Для существующих проектов Vue пользовательский интерфейс Onsen можно установить с помощью NPM или Yarn:

# NPM
npm install onsenui vue-onsenui --save-dev
# Yarn
yarn add onsenui vue-onsenui -D

В приложение должны быть включены некоторые необходимые файлы:

import 'onsenui/css/onsenui.css'; // Webpack CSS import
import 'onsenui/css/onsen-css-components.css'; // Webpack CSS import
import VueOnsen from 'vue-onsenui';
Vue.use(VueOnsen);

(2) В противном случае новые проекты можно запускать сразу через Vue CLI. При желании он может добавить Vuex и некоторые другие функции:

vue init OnsenUI/vue-pwa-webpack # For PWA

После настройки пользовательского интерфейса Vue и Onsen следующим шагом будет создание App.vue и NotesPage.vue со следующими кодами и реализация шаблона панели вкладок.

Вот и все.

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

Проблема I - левая / правая пустая область в ландшафтном режиме

Итак, давайте покажем созданный шаблон панели вкладок в iPhone X Safari. Теперь я буду использовать iPhone X Simulator, доступный в Xcode 9, вместо настоящего.

При запуске локального HTTP-сервера и доступе к нему из симулятора будут отображаться следующие экраны:

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

О, белые пустые области появились с обеих сторон. На самом деле они автоматически вставляются iPhone X Safari. Это связано с тем, что если с обеих сторон нет пустых областей, выемка и закругленные углы скроют часть содержимого страницы.

Я назову это Проблема I. Пустые области слева и справа появляются в альбомной ориентации.

Цвет этих левых / правых пустых областей можно изменить, указав background-color в элементе html и body элементе, поэтому, если мы установим его на black, некоторые странности могут быть уменьшены.

body {
  background-color: black; /* Quick fix for Problem I */
}

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

Исправить проблему I. Управление пустыми областями слева и справа

iPhone X Safari предоставляет возможность включать / отключать левые / правые пустые области.

Пустые области можно контролировать с помощью специального аргумента viewport-fit в <meta name="viewport" content="..."> . viewport-fit принимает auto, contain и cover как допустимые значения.

Итак, установим viewport-fit на cover.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

Пустые области исчезли, и проблема I была исправлена.

Проблема II - содержание страницы, скрытое препятствиями

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

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

Исправить проблему II

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

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

Следовательно, в зависимости от дизайна вашего веб-приложения вам необходимо установить margin и padding для всех полей, вызывающих проблему. Это довольно утомительно, но также необходимо добиться оптимизированного пользовательского интерфейса для iPhone X Safari.

Если мы хотим установить margin и padding для определенного поля, нам нужно сделать настройку включенной только в ландшафтном режиме.

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

@media screen and (orientation: landscape) {
  .some-box {
    padding-left: 44px;
    padding-right: 44px;
  }
}

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

В качестве конкретных ценностей Apple определила понятие под названием безопасная зона.

Понимание безопасной зоны

Безопасная зона - это область, в которую не могут попасть выемка, углы и планка.

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

(Источник: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/)

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

iPhone X Safari имеет «верх = 0, правый = 44, нижний = 21, левый = 44» в качестве вставок безопасной области в ландшафтном режиме. (Мы можем проверить значение с помощью API iOS.) Итак, нам просто нужно изменить панель вкладок, чтобы в нашем случае левое / правое заполнение было равно 44px, а нижнее - 21px.

Проблема II может быть решена такой устойчивой настройкой.

Совет: использование constant() требует внимания

В официальном блоге WebKit объясняется, как поддерживать безопасную зону с помощью новой функции CSS constant() и четырех констант safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, safe-area-inset-bottom в сообщении, опубликованном 22 сентября 2017 года. Четыре константы safe-area-inset-* обладают двумя хорошими характеристиками: значение устанавливается, только если viewport-fit установлено на cover и значение автоматически переключается между портретным значением и значением альбомной ориентации при повороте экрана.

Но функция constant() и четыре константы safe-area-inset-* имеют следующие проблемы:

(1) Функция constant() была удалена из стандарта CSS и переименована в env() function с 21 сентября 2017 года. constant() функция по-прежнему доступна в iOS 11.0 Safari, но может быть удалена и станет непригодной для использования в будущем.

(2) constant() и env() не работают в браузерах, кроме Safari по состоянию на ноябрь 2017 г., и это вызывает ошибки, если мы пишем такие коды, как padding-left: calc(constant(safe-area-inset-left) + 10px);. Поэтому нам всегда нужно писать резервные правила для этих браузеров. Немного сложно использовать.

(3) iOS 11.0 UIWebView имеет ошибку, из-за которой даже при повороте экрана изменение четырех констант safe-area-inset-* не отражается на экране.

Я рекомендую использовать необработанные значения (пример: top = 0, right = 44, bottom = 21, left = 44) напрямую или через переменные вместо зависимости от safe-area-inset-* в течение некоторого времени, чтобы избежать описанного выше риска.

Использование помощника поддержки iPhone X в библиотеках пользовательского интерфейса

В некоторых библиотеках пользовательского интерфейса есть функция, которая помогает поддерживать iPhone X. Пользовательский интерфейс Onsen, который я выбрал сейчас, предоставляет возможность автоматически устанавливать соответствующие margin и padding.

Добавление атрибута onsflag-iphonex-landscape к элементу html включает исправление CSS для iPhone X и изменяет margin и padding каждого поля, которое требует исправления.

Что касается других устройств iOS, атрибутonsflag-iphonex-landscape следует добавлять только в iPhone X. Для этого было бы проще использовать this.$ons.platform.isIPhoneX():

beforeMount() {
  const html = document.documentElement;
  if (this.$ons.platform.isIPhoneX()) {
    html.setAttribute('onsflag-iphonex-landscape', '');
  }
},

Некоторые библиотеки пользовательского интерфейса упрощают решение проблемы установки margin и padding, как я писал выше.

Наряду с проблемой I, наконец, была исправлена ​​проблема II, заключающаяся в том, что содержимое страницы скрыто препятствиями.

Резюме ЧАСТИ I

В ЧАСТИ I мы использовали шаблон панели вкладок в качестве примера и объяснили проблему I (проблема с пустой областью) и проблему II (проблема сокрытия содержимого страницы), а затем предложили решения для каждой проблемы.

Решив проблему I и проблему II, iPhone X поддерживает веб-приложения.

В ЧАСТИ I мы упоминали о веб-приложениях.

Но я думаю, что некоторые из вас создают приложения Cordova с помощью набора инструментов Cordova или Monaca. Итак, я хотел бы объяснить, как сделать ваше приложение Cordova совместимым с iPhone X.

ЧАСТЬ II - Создание нативных приложений с помощью Cordova для iPhone X

В случае приложения Cordova поддержка iPhone X означает поддержку iPhone X WebView.

Итак, давайте посмотрим, что произойдет, если мы покажем приложения Cordova в iPhone X WebView так же, как ЧАСТЬ I.

Настроить приложение Cordova

Давайте создадим приложение Cordova на Vue.

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

(1) Для существующих проектов Cordova + Vue его можно установить с помощью NPM или Yarn:

# NPM
npm install onsenui vue-onsenui --save-dev
# Yarn
yarn add onsenui vue-onsenui -D

В приложение должны быть включены некоторые необходимые файлы:

import 'onsenui/css/onsenui.css'; // Webpack CSS import
import 'onsenui/css/onsen-css-components.css'; // Webpack CSS import
import VueOnsen from 'vue-onsenui';
Vue.use(VueOnsen);

(2) В противном случае новые проекты можно запускать сразу через Vue CLI. При желании он может добавить Vuex и некоторые другие функции:

vue init OnsenUI/vue-cordova-webpack # For Cordova apps

(3) После настройки Cordova, Vue и OnsenUI давайте создадим App.vue и NotesPage.vue со следующим содержимым, как в ЧАСТИ I, и реализуем шаблон панели вкладок.

Вот и все.

Как насчет проблемы I?

В ЧАСТИ I мы объяснили проблему I - iPhone X Safari автоматически вставляет белые пустые области с обеих сторон.

Итак, давайте проверим, сохраняется ли проблема I в iPhone X WebView.

cordova platform add ios
npm run build && cordova run ios --target="iPhone-X"

О, в случае приложений Cordova кажется, что пустые области появляются даже в портретном режиме.

Тогда что происходит в ландшафтном режиме?

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

Оказалось, что проблема I все еще возникает в приложениях Cordova. Но, как и в ЧАСТИ I, эту проблему можно решить, просто установив viewport-fit на cover.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

Совет: проблема I уже устранена в WKWebView

В iOS 11 есть два WebView: старый UIWebView (по умолчанию Cordova, не рекомендуется Apple) и новый WKWebView (рекомендованный Apple).

В UIWebView, поскольку auto из viewport-fit указывает на contain, мы должны изменить его на cover. Но в WKWebView auto по умолчанию указывает на cover (подтверждено автором). Это означает, что Проблема I уже исправлена ​​в WKWebView, и нам больше не нужно устанавливать viewport-fit=cover.

Поскольку WKWebView - это API нового поколения, в целом он работает стабильно по сравнению с UIWebView в нескольких ситуациях. Если вы используете Cordova, я рекомендую заменить UIWebView на WKWebView с помощью плагина cordova-plugin-wkwebview-engine. Но также имейте в виду, что WKWebView имеет некоторые незначительные недостатки.

Проблема III

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

Но в случае с приложениями Cordova, даже если Проблема I решена, мы не можем сразу работать над Проблемой II, потому что есть другая проблема, Проблема III.

Посмотрим, что происходит на всем экране после решения Задачи I.

Есть черные пустые области: вверху / внизу в портретном режиме и слева / справа и внизу в альбомном режиме. Это то, что я называю проблемой III.

Подобно задаче I, но принцип, лежащий в основе проблемы, другой. Проблема III вызвана спецификацией iPhone X, согласно которой все приложения, не удовлетворяющие определенному условию, автоматически отображаются в безопасной области. Состояние объясняется следующим образом:

Включите собственное полноэкранное разрешение. Ваше приложение будет работать в полноэкранном режиме на iPhone X, если базовый SDK вашего проекта настроен на iOS 11 и у вас есть стартовая раскадровка или изображение для запуска iPhone X.

(Источник: https://developer.apple.com/ios/update-apps-for-iphone-x/)

Я хотел бы пояснить процитированную часть более конкретно. Прежде всего, в iOS есть два метода отображения заставок: (1) старый метод, который просто показывает изображение (по умолчанию Cordova, не рекомендуется Apple) и (2) новый метод, который показывает изображение с некоторым растяжением и обрезкой на основе механизма, называемого раскадровкой (рекомендовано Apple).

В случае (1), если приложение Cordova не содержит изображения, размер которого совпадает с разрешением экрана iPhone X (1125 x 2436 пикселей), приложение будет показано в безопасной области. . Добавление изображения размером 1125 x 2436 пикселей устраняет эту проблему, и приложение будет отображаться в полноэкранном режиме.

В случае (2) все приложения Cordova будут отображаться в полноэкранном режиме.

Но чтобы использовать (2), мы должны добавить плагин cordova-plugin-splashscreen в приложение Cordova, используя следующую команду:

cordova plugin add cordova-plugin-splashscreen

А также изображения, из которых состоит экран-заставка, должны быть определены в <platform name="ios"> из config.xml:

<splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
<splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
<splash src="res/screen/ios/Default@3x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
<splash src="res/screen/ios/Default@2x~ipad~comany.png" />

Конечно, должны быть добавлены сами файлы изображений. Размер каждого изображения должен в основном соответствовать документу cordova-plugin-splashscreen, и только для устройств с экраном Super Retina (@3x), который имеет 3-кратное разрешение, я рекомендую установить размер изображения 2436 x 1242 пикселей, чтобы оно перекрывало самую длинную длинную сторону. iPhone X (2436 пикселей) и самая длинная короткая сторона iPhone 8 Plus (1242 пикселей). Обратите внимание, что в случае (2) приложения всегда отображаются в полноэкранном режиме и размер каждого изображения влияет только на поведение экрана-заставки и не влияет размер приложения.

Default@2x~iphone~anyany.png (= 1334x1334 = 667x667@2x)
Default@2x~iphone~comany.png (= 750x1334 = 375x667@2x)
Default@2x~iphone~comcom.png (= 750x750 = 375x375@2x)
Default@3x~iphone~anyany.png (= 2436x2436 = 812x812@3x)
Default@3x~iphone~anycom.png (= 2436x1242 = 812x414@3x)
Default@3x~iphone~comany.png (= 1242x2436 = 414x812@3x)
Default@2x~ipad~anyany.png (= 2732x2732 = 1366x1366@2x)
Default@2x~ipad~comany.png (= 1278x2732 = 639x1366@2x)
(Please save the images into res/screen/ios/)

В обоих методах (1) и (2) после правильной настройки приложение будет отображаться в полноэкранном режиме.

Проблема III исправлена. Но в то же время возникла проблема II (содержимое страницы, скрытое препятствиями). Итак, теперь давайте исправим проблему II.

Совет.

Проблему III не всегда нужно устранять, потому что l устранение проблемы III как она есть, предотвращает проблему II. Поскольку проблема II требует определенных затрат, это будет хорошим выбором , когда вы захотите сделать существующее приложение Cordova совместимым с iPhone X по невысокой цене.

Исправить проблему II

Как мы показали ранее, приложение Cordova вызывает проблему II как в портретном, так и в ландшафтном режимах.

Как и в ЧАСТИ I, в основном мы можем исправить проблему II, установив соответствующие значения для margin и padding, чтобы поля не были скрыты выемкой, углами и полосой.

Пользовательский интерфейс Onsen предоставляет исправление CSS для портретного режима, а также для ландшафтного режима. Добавление атрибутов onsflag-iphonex-portrait и onsflag-iphonex-landscape к элементу html включает исправление CSS как в портретном, так и в ландшафтном режимах.

beforeMount() {
  const html = document.documentElement;
  if (this.$ons.platform.isIPhoneX()) {
    html.setAttribute('onsflag-iphonex-portrait', '');
    html.setAttribute('onsflag-iphonex-landscape', '');
  }
}

Патч CSS работает следующим образом:

Проблема II в iPhone X WebView исправлена.

Резюме ЧАСТИ II

В ЧАСТИ II мы объяснили, что если мы покажем приложения Cordova в iPhone X WebView, это вызовет еще две проблемы, указанные ниже, в дополнение к проблемам в веб-приложениях:

  • Белые пустые области отображаются в портретном режиме , а также в альбомном режиме.
  • Приложения не отображаются в полноэкранном режиме по умолчанию (Проблема III).

Более того, я объяснил, что поддержка приложений Cordova в iPhone X сложнее, чем поддержка веб-приложений.

Однако эти проблемы можно легко исправить, установив viewport-fit=cover и отобразив экран-заставку на основе раскадровки с помощью cordova-plugin-splashscreen.

Даже если вы разрабатываете приложения Cordova, вы можете без проблем поддерживать iPhone X, рассматривая и решая проблемы I, II и III один за другим.

Теперь мы можем создавать приложения Cordova, такие как собственные приложения для iPhone X, путем реализации перехода между страницами с помощью компонентов пользовательского интерфейса Onsen, таких как Action Sheet (_ 125_) и Navigator (v-ons-navigator):

Исходный код приведенного выше примера приложения Cordova выглядит так:

Полный исходный код приложения доступен в этом репозитории GitHub.

Заключение

В этом посте мы говорили о проблемах веб-приложений для iPhone X (ЧАСТЬ I) и проблемах приложений Cordova (ЧАСТЬ II). В частности, мы объяснили следующие три проблемы и способы их решения:

  • Проблема I - пустые области по краям экрана, которые можно исправить с помощью viewport-fit=cover
  • Проблема II - содержимое страницы скрыто выемкой, закругленными углами и полосой, что можно исправить, установив соответствующие margin и padding.
  • Проблема III. Приложения не отображаются в полноэкранном режиме, что можно исправить, включив заставку на основе раскадровки.

Также было объяснено вспомогательное средство поддержки iPhone X для пользовательского интерфейса Onsen (html[onsflag-iphonex-portrait] и html[onsflag-iphonex-landscape]).

Надеюсь, этот пост поможет вам создавать потрясающие приложения, работающие на iPhone X. Удачного кодирования!

Что дальше

Учетная запись Twitter и веб-сайт Onsen UI находятся здесь:

использованная литература

[css-variables] Свойства и переменные User Agent · Проблема № 1693 · w3c / csswg-drafts
https://github.com/w3c/csswg-drafts/issues/1693
(4 августа , 2017)

[CB-13273] Размер Webview неверен на iPhone X (Simulator) - ASF JIRA
https://issues.apache.org/jira/browse/CB-13273
(13 сентября 2017 г. )

Удаление белых полос в Safari на iPhone X
http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/
(14 сентября 2017 г. )

ios - Приложение Cordova не отображается правильно на iPhone X (Симулятор) - Переполнение стека
/ 46232813 # 46232813
(15 сентября 2017 г.)

34518947: Константы вставки безопасной области UIWebView не обновляются при повороте · Проблема № 18415 · lionheart / openradar-mirror
https://github.com/lionheart/openradar-mirror/issues/18415
( 20 сен, 2017)

Разработка веб-сайтов для iPhone X | WebKit
https://webkit.org/blog/7929/designing-websites-for-iphone-x/
(22 сентября 2017 г.)