| 22 сентября 2017 г. — 11:30 PT
Сегодня команда, стоящая за браузерным движком Safari WebKit, подробно рассказала о том, как дизайнеры должны создавать сайты для iPhone X. Грядущий датчик корпуса iPhone, также известный как «челка», создал новые проблемы как для дизайнеров, так и для разработчиков. Это побудило некоторых реализовать креативные «решения» для этой проблемы. Руководство WebKit с официальными рекомендациями для iPhone X должно помочь веб-разработчикам по всему миру.
Корпус с датчиком iPhone X представит проблемы для дизайна веб-сайтов в их нынешнем виде. Apple попыталась смягчить эту проблему, добавив поля с обеих сторон контента сайта. Для сайтов с полноэкранным контентом, таких как 9to5Mac, эта мера может оказаться менее привлекательной, чем предполагала Apple. Многие веб-разработчики могут захотеть немного подкорректировать свои сайты, чтобы они выглядели как можно лучше на предстоящем iPhone X. Пост команды WebKit о дизайне для iPhone X предоставляет примеры «до» и «после» того, что могут сделать разработчики.
Сегодняшняя документация аналогична той, что ранее анализировал Стивен Рэдфорд в CSS. Блог WebKit объясняет, что для начала разработчикам следует использовать полноэкранный режим iPhone X в ландшафтной ориентации. Для этого разработчикам необходимо реализовать viewport-fit=cover в мета-теге своего сайта. Без этого сайты могут не растягиваться и не использовать всю ширину дисплея, выглядя странно.
-
- До изменения кода
-
- После изменения кода
После настройки viewport контент может отображаться под корпусом датчика и индикатором «Домой». Apple отмечает, что следующим шагом является учет безопасной области iPhone X. Учитывая безопасную область, веб-разработчик может гарантировать, что контент не будет скрыт корпусом датчика, индикатором «Домой» или закругленными углами.
Это ключевой момент для дизайнеров: благодаря дизайну без рамок, iPhone X просто возвращает рамки в свое программное обеспечение.
Из руководства Apple «Дизайн веб-сайтов для iPhone X»:
Для достижения этой цели WebKit в iOS 11 включает новую функцию CSS, constant(), и набор из четырех предопределенных констант: safe-area-inset-left, safe-area-inset-right, safe-area-inset-top и safe-area-inset-bottom. В сочетании они позволяют стилям ссылаться на текущий размер полей безопасной области с каждой стороны.
-
- После реализации viewport-fit=cover
-
- Безопасные области iPhone X для веб-контента
С помощью этих двух изменений веб-разработчики могут адаптировать свои сайты, чтобы они выглядели как можно лучше на новом iPhone X. Любопытно, что Apple также упоминает функции min() и max(). Обе относительно новы для CSS, но ни одна из них не доступна в Safari 11 или iOS 11. (Apple заявляет, что они будут доступны в будущей версии Safari Technology Preview.)
9to5Mac экспериментировал с кодом нашего сайта, чтобы учесть корпус датчика iPhone X. Хотя это и не является технически сложным, это может потребовать значительной работы для более сложных макетов сайта. К счастью, задержки производства iPhone X могут дать веб-разработчикам время до массового внедрения корпуса датчика.
Смотрите 9to5Mac на YouTube для получения дополнительных новостей об Apple: