Как выглядят сайты на экране iPhone X

Подавляющее большинство страниц в Интернете не смогут автоматически подстроить верстку под формат дисплея iPhone X. Это признала даже Apple и выпустила для владельцев сайтов специальное руководство, которое подробно рассказывает о том, какие шаги следует предпринять, чтобы веб-сайт самостоятельно адаптировался под еще не вышедший смартфон.

Как и следовало ожидать, основной проблемой для владельцев веб-ресурсов является тот самый наплыв iPhone X, содержащий фронтальную камеру, сенсор Face ID и датчики освещения и приближения. Именно он мешает стандартной работе сайтов, большинство из которых не могут самостоятельно подобрать наилучший формат отображения содержимого.

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

А так выглядит пример неправильной адаптации, когда некоторые компоненты сайта, подстраиваясь под экранный наплыв, сдвигают другие:

В идеале все должно выглядеть так:

Сравните адаптацию в портретной ориентации:

Источник