Как верстать сайт под iPhone X

Как верстать сайт под iPhone X

Сообщение k0ttee »

22 сентября на блоге WebKit появилась такая новость-заметка от Тимати Хортона, о том что, iPhone X то еще не вышел (в ноябре будет выходить), а уже надо задумываться - там эти краешки же будут. Как сайты то будут выглядеть в этих краях?

Как верстать под iPhone X

Забегая вперед, успокою, - по умолчанию будет нормально. То есть - будут вот такие безопасные полосочки по бокам (в ландшафтном режиме) и сверху снизу (в портретном режиме). И закрашиваться эти безопасные области будут тем же фоном, которым покрыт <body>.

Как верстать под iPhone X 1.png
Как верстать под iPhone X 1.png (32.76 КБ) Просмотров: 729


Но если вы хотите верстать под iPhone X с прибабахом, чтоб у вас край в край все было... Если вы готовы "поверстать для айфончика тэн отдельно и ориентируетесь на богачуг общества"... Тогда вы можете в тэг вьюпорт вписать не просто инишиал-скейл=1 (как для обычных смартфонов), а вьюпорт-фит=кавер.

Код: Выделить всё
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>


То есть, для вас есть новый атрибут viewport-fit. По умолчанию он равен auto. Если вы его не напишите - будет авто и безопасные поля. А если напишите - от края до края без полей (срабатывает только в iOS 11 и только в iPhone X).

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

Как верстать под iPhone X 2.png
Как верстать под iPhone X 2.png (31.24 КБ) Просмотров: 729


Далее нужно будет добавить padding и контролировать. То есть - можно сделать фоны элементов по всей ширине, а содержимому сделать отступы. И в целом это будет выглядеть на порядок симпотичнее. Этим же способом получится довести фоновые картинки до краев, оставив отступы контенту.

Как верстать под iPhone X 3.png
Как верстать под iPhone X 3.png (29.17 КБ) Просмотров: 729


Кроме того, в WebKit на iOS 11 есть новая функция constant. Это как var (переменная) только constant (константа). Работает там же где есть var.
Можно константы себе запилить в самом начале CSS-файла, например отступы в пикселях, а потом их везде подставлять. Вот как-то так.
Код: Выделить всё
.post {
    padding: 12px;
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
}


На английском можно почитать по ссылке:
Код: Выделить всё
https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Человек на путях? Человек за бортом? Человек приуныл!
Аватара пользователя
k0ttee

 
Группа: Специалист ruSEO
Сообщения: 10171
Рефералы: 2
Зарегистрирован: 02 май 2014
Средств на руках: 7.70
Статус: я заснял
Спонсор
 
Re: Как верстать под iPhone X

Сообщение </Pixsel> »

Вот из за таких дизайнеров устройств будут дизайны сайтов выглядеть все проще и проще.
Аватара пользователя
</Pixsel>
Зам. Администратора
 
Группа: Дизайнер ruSEO
Сообщения: 11356
Рефералы: -17
Зарегистрирован: 08 фев 2012
Откуда: От сюда
Средств на руках: 33.20
Статус: Web-Disigner
Спонсор
 
Re: Как верстать сайт под iPhone X

Сообщение birds »

Pixsel писал(а):дизайны сайтов выглядеть все проще и проще.

Да давно уже идет эта тенденция, и начали ее гугл с яндексом. Я например яндекс браузер по этому и не юзаю, я его как запущу, так тошнить начинает. Дизайн унылое Г.
Зарабатываю на крипте | играх | банках. Продвигаю сайты: статьями и вечными
Онлайн будильник - не проспи! | Генератор ников
Аватара пользователя
birds
Администратор
 
Группа: Администраторы
Сообщения: 19541
Рефералы: -208
Зарегистрирован: 24 авг 2010
Откуда: местный житель
Средств на руках: 331.80
Статус: летящий вперед
Спонсор
 
Re: Как верстать сайт под iPhone X

Сообщение k0ttee »

Когда сасунг выкатил скругленный экран - все похлопали и забыли (сообщества разрабатывающие веб-стандарты забили на сасунг).
Когда яблоко показало огрызок - разработчики браузерного движка зачесались (CSS foundation тоже зачесались и анонсировали новые спецификации).
Человек на путях? Человек за бортом? Человек приуныл!
Аватара пользователя
k0ttee

 
Группа: Специалист ruSEO
Сообщения: 10171
Рефералы: 2
Зарегистрирован: 02 май 2014
Средств на руках: 7.70
Статус: я заснял
Спонсор
 

Вернуться в Верстка, дизайн, графика

 


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 9