[Перевод] Веб-дизайн iPhone X

внешний интерфейс Программа перевода самородков HTML CSS
[Перевод] Веб-дизайн iPhone X

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

Канавка частично заполнена листом бумаги.background-color(например, указать как<body>или<html>цвет фона элемента), чтобы он гармонировал с остальной частью страницы. Для многих сайтов этого достаточно. Если на вашей странице есть только текст и изображения на цветном фоне, раздел Groove по умолчанию также выглядит очень красиво.

Для других страниц — особенно тех, которые создают горизонтальную панель навигации во всю ширину, как на изображении ниже, вы можете пойти немного глубже и воспользоваться преимуществами новых функций.Руководство по человеческому интерфейсу iPhone Xдетализирует некоторые общие принципы проектирования иUIKit-документацияОбсуждаются конкретные механизмы, которые могут использовать нативные приложения для обеспечения хорошего внешнего вида. Ваш веб-сайт может использовать преимущества дисплеев от края до края, используя некоторые API-интерфейсы, подобные WebKit, представленные в iOS 11.

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

Safari's default insetting behavior
Safari's default insetting behavior

Встроенное поведение Safari по умолчанию.

использовать весь экран

Первая новая функция предназначена для существующихviewportРасширение метатега, называемоеviewport-fit, который обеспечивает контроль над поведением встраивания. Доступно в iOS 11viewport-fit.

viewport-fitЗначение по умолчанию — auto, что приводит к автоматическому встраиванию. Чтобы отключить это поведение и сделать страницу полноэкранной, вы можете установитьviewport-fit:coverдляcover. После этого нашviewportМета теги выглядят так:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

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

viewport-fit=cover
viewport-fit=cover

использоватьviewport-fit=coverАдаптировать к полноэкранному режиму.

Обратите внимание на безопасные зоны

чтобы принятьviewport-fit=coverПосле того, как страницу можно будет использовать, следующим шагом будет выборочное дополнение элементов, содержащих важный контент, чтобы убедиться, что элементы не заслоняются формой экрана. Полученная страница в полной мере использует увеличенное пространство экрана iPhone X, в то же время динамически настраиваясь, чтобы избежать четырех углов, системного пространства камеры TrueDepth, близкого к домашнему экрану.

Safe and Unsafe Areas
Safe and Unsafe Areas

Безопасные и небезопасные зоны в альбомной ориентации на iPhone X (со встроенными значениями по умолчанию)

Для этого в WebKit в iOS 11 добавлен новыйCSS-функции,constant(), и наборЧетыре предопределенных константы:safe-area-inset-left, safe-area-inset-right, safe-area-inset-topа такжеsafe-area-inset-bottom. При объединении позволяет стилям использовать размер безопасной области в каждом направлении.

Рабочая группа CSSНедавно решил добавить эту функцию, но с другим именем, имейте это в виду.

constant()функция похожа наvar(), как в следующем примере, вpaddingИспользование атрибута:

.post {
    padding: 12px;
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
}

для не поддерживаемыхconstant()браузеры, в том числеconstant()стили будут игнорироваться. Поэтому важно использоватьconstant()стили дополнительно используют альтернативные стили.

Safe area constants
Safe area constants

Обратите внимание, что безопасная зона встроена, чтобы было видно важное содержимое.

Используйте min() и max(), чтобы объединить все это

В этом разделе также описывается текущая версия iOS 11.нетРеализованные функции.

Если вы используете константу () для установки безопасной области в дизайне вашего веб-сайта, вы можете заметить, что при установке безопасной области трудно указать минимальный отступ. На приведенной выше странице мы заменили левый отступ в 12 пикселей наconstant(safe-area-inset-left), при возврате к книжной ориентации безопасная область слева становится равной 0 пикселям, а текст сразу следует за краем экрана.

No margins
No margins

Встроенная безопасная область не заменяет поля.

Чтобы исправить это, нам нужно указать, что отступ должен быть отступом по умолчанию или большим из безопасной области. Это можно сделать сСовершенно новые функции CSSmin()а такжеmax(), который будет поддерживаться в будущих предварительных версиях Safari. Обе функции принимают любое количество аргументов и возвращают минимальное или максимальное значение. они могут быть вcalc()используемые или вложенные вместе, обе функции позволяют использовать такие функции, какcalc()та же математика.

Например, пример, подобный следующему, может быть использован следующим образомmax():

@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, constant(safe-area-inset-left));
        padding-right: max(12px, constant(safe-area-inset-right));
    }
}

Использование @supports для определения минимума и максимума важно, потому что, согласно CSS, не все браузеры его поддерживают.Недопустимая обработка переменных,не хочуУкажите переменные в запросе @supports.

На странице примера в портретной ориентацииconstant(safe-area-inset-left)разрешается в 0 пикселей, поэтомуmax()разрешается до 12px. Когда экран расположен горизонтально, из-за наличия сенсорного пространства установитеconstant(safe-area-inset-left)станет больше, аmax()Эта функция будет анализировать этот размер, чтобы гарантировать, что важный контент всегда виден.

max() with safe area insets
max() with safe area insets

max() сочетает вкладки безопасной области с традиционными полями

Опытные веб-разработчики, возможно, уже сталкивались с механизмами блокировки CSS, часто используемыми для установки свойств CSS в определенном диапазоне значений. использовать вместеmin()а такжеmax()Упростит задачу и поможет с эффективным адаптивным дизайном в будущем.

Отзывы и вопросы

Теперь вы можетеXcode 9Safari в симуляторе iPhone X начинает использовать подгонку области просмотра и встраивание анклавов. Хотелось бы услышать обо всех принимаемых функциях, пожалуйста, не стесняйтесь присылать отзывы и вопросы по адресуweb-evangelist@apple.comили в твиттере@webkit, и отправлять сообщения об ошибкахТрекер ошибок WebKit.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,React,внешний интерфейс,задняя часть,товар,дизайнЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории