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

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Веб-дизайн

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

Опции

k0ttee

Topic Starter сообщение

12.10.2017, 16:24; Ответить: k0ttee

Сообщение #1

Топовый постер

Группа: User
Сообщений: 12040
Регистрация: 2.5.2014
Поблагодарили: 0 раз
Репутация:

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

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

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

Как верстать под iPhone X 1.png ( 32,76 килобайт ) Кол-во скачиваний: 1784

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

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

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

Как верстать под iPhone X 2.png ( 31,24 килобайт ) Кол-во скачиваний: 1784

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

Как верстать под iPhone X 3.png ( 29,17 килобайт ) Кол-во скачиваний: 1784

Кроме того, в 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/

--------------------

Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9

Ответить с цитированием данного сообщения

melrok melrok 12.10.2017, 16:34; Сообщений: 4049 Поблагодарили: 2 раза Репутация: 3 Просмотр профиля	12.10.2017, 16:34; Ответить: melrok Сообщение #2
Топовый постер Группа: Viewer Сообщений: 4049 Регистрация: 11.10.2012 Поблагодарили: 2 раза Репутация: 3	Вот из за таких дизайнеров устройств будут дизайны сайтов выглядеть все проще и проще.

airman airman 12.10.2017, 17:03; Сообщений: 9058 Поблагодарили: 251 раз Репутация: 33 Просмотр профиля	12.10.2017, 17:03; Ответить: airman Сообщение #3
Топовый постер Группа: Active User Сообщений: 9058 Регистрация: 26.1.2010 Из: Россия Поблагодарили: 251 раз Репутация: 33	(Pixsel) дизайны сайтов выглядеть все проще и проще. Да давно уже идет эта тенденция, и начали ее гугл с яндексом. Я например яндекс браузер по этому и не юзаю, я его как запущу, так тошнить начинает. Дизайн унылое Г. -------------------- Статья: мой опыт заработка на рефералах 100к в месяц \| Пасьянс Косынка

k0ttee

Topic Starter сообщение

12.10.2017, 19:39; Ответить: k0ttee

Сообщение #4

Топовый постер

Группа: User
Сообщений: 12040
Регистрация: 2.5.2014
Поблагодарили: 0 раз
Репутация:

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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

--------------------

Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9

« Предыдущая тема · Веб-дизайн · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Будет ли склейка сайтов если старый телефон перенести на новый сайт?	2	noviktamw	609	Вчера, 23:05 автор: Liudmila
Apple показала новые iPhone 15	74	arendator	7766	Вчера, 21:45 автор: rosalin
[Услуги] Баннер/Графика/Сайт	241	FillPlay	180773	Вчера, 15:19 автор: FillPlay
Burzh.top\|Партнерская программа под любой вид трафика (email, спам, УБТ)	3	cryptius	901	Вчера, 14:47 автор: cryptius
Как в пушсетках покупают по 100-200 тысяч кликов за день?	2	Boymaster	723	24.4.2024, 17:52 автор: Boymaster

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 26.4.2024, 6:23

Дизайн