Почти каждый год Apple проводит одно из самых ожидаемых технических мероприятий; Эти события запуска представляют новые продукты и обновления существующих продуктов, таких как iPhone и iPad. Последний выпуск iPhone не стал исключением: люди выстроили улицы возле магазинов Apple в поисках блоков, надеясь получить в свои руки новейшие айфоны: Xs и Xs Max.
В то время как Apple не предоставит никакой информации о том, сколько телефонов они продали, были сделаны оценки, которые считают, Apple продала в общей сложности 52 миллиона iPhone за первые три месяца этого года, и iPhone X был их крупнейшим индивидуальным продавцом , Поскольку все эти айфоны представлены на рынке, крайне важно, чтобы ваш веб-сайт был специально разработан, чтобы использовать преимущества его нового макета и функций.
Вот как вы можете создать свой сайт для этого:
Как новые модели влияют на сайты
Когда кто-то впервые получит свой новый iPhone, он заметит, что граница между экраном и рамкой телефона (называемая скосом) практически отсутствует. Это означает, что весь телефон будет выглядеть как один большой экран без обрамления вокруг него. Поскольку большинство веб-сайтов не предназначены для этого типа дисплея, телефоны будут иметь «безопасную область» на экране вокруг сайта, чтобы он не казался сломанным или искаженным. Эта безопасная область будет заполнена цветом фона.
В дополнение новый дизайн имеет вырез в верхней части телефона (обычно называемый «выемка») и нет кнопки «домой» (это было заменено линией внизу экрана). Из-за нового стиля дизайна веб-сайты могут иметь проблемы с полным отображением и отображением всех доступных функций.
Как создать новый iPhone
Для большинства веб-сайтов этот новый дизайн-план не будет проблемой. Если вы используете в основном текст и изображения, макет будет отображаться безупречно с использованием цвета фона в «безопасной области». Однако есть несколько вещей, на которые следует обратить внимание:
- Весь экран - чтобы использовать весь экран iPhone для своего сайта, вам просто нужно настроить свой сайт, изменив метатег viewport под названием «viewport fit». По умолчанию для него установлено значение «auto». Чтобы изменить его на в полноэкранном режиме вы меняете тег на «обложка». Затем вы можете обновить страницу и посмотреть, как она выглядит, но вырез может охватывать некоторые из ваших функций, и нижняя строка для навигации может оказаться более сложной в использовании.
- Редизайн. После того, как вы прошли весь экран, вам нужно сбросить настройки, чтобы вывести их из закрытых областей. WebKit включает в себя новая функция env (), которая поможет вам в этом , Существует четыре среды по умолчанию, в которые вы можете добавить отступы, чтобы вы могли переместить свои функции из этой области. Они включают в себя «безопасную область слева», «безопасную область справа», «безопасную область сверху» и «безопасную область снизу».
Как только вы поиграете со вставками для них и добавите некоторые отступы, вы сможете перемещать элементы на странице так, чтобы они были видимыми и полностью функциональными. Существуют и другие элементы с переменными min () и max (), которые можно вводить, чтобы облегчить этот процесс.
С помощью нескольких простых настроек существующей веб-страницы вы можете максимально увеличить возможность просмотра вашего сайта во всех форматах, включая новую мобильную технологию, используемую с iPhone X и его вариантами Xs. Это необходимо, поскольку все больше людей, чем когда-либо, просматривают онлайн-контент через свои смартфоны.