Современные браузеры позволяют легко настраивать определенные компоненты, например значки, цвет адресной строки и даже добавлять такие элементы, как пользовательские плитки. Эти простые изменения могут повысить вовлеченность и вернуть пользователей на ваш сайт.
Современные браузеры позволяют легко настраивать определенные компоненты, например значки, цвет адресной строки и даже добавлять такие элементы, как пользовательские плитки. Эти простые изменения могут повысить вовлеченность и вернуть пользователей на ваш сайт.
Добавьте качественные значки и элементы
Когда пользователь посещает вашу веб-страницу, браузер пытается получить значок из HTML-кода. Значок может показываться в разных местах, например на вкладке браузера, в списке недавно открытых приложений, на странице новой или недавно посещенной вкладки и т. д.
Качественное изображение сделает ваш сайт более узнаваемым и поможет пользователям быстрее находить его.
Чтобы обеспечить поддержку всех браузеров, добавьте несколько тегов в элемент <head> на каждой странице.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome и Opera
В Chrome и Opera используется значок размером icon.png, который масштабируется до нужного размера на устройстве. Чтобы предотвратить автомасштабирование, вы также можете указать дополнительные размеры с помощью атрибута sizes.
Safari
В Safari также используется тег <link> с атрибутом rel: apple-touch-icon, чтобы указать значок главного экрана.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
Для apple-touch-icon лучше всего подходит непрозрачное изображение в формате PNG размером 180 x 180 или 192 x 192 пкс.
Не рекомендуется указывать несколько версий в атрибуте sizes.
Ранее в Safari для iOS использовалось ключевое слово -precomposed, чтобы избежать добавления визуальных эффектов, но начиная с iOS 7 в этом нет необходимости.
Internet Explorer и Windows Phone
Новый главный экран Windows 8 поддерживает четыре разных макета для закрепленных сайтов и требует четыре значка. Если вы не хотите поддерживать определенный размер, вы можете не указывать соответствующие метатеги.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Плитки в Internet Explorer
Закрепленные сайты и динамические плитки Microsoft – это уникальные функции, которые не рассматриваются в этом руководстве. Подробную информацию вы найдете в статье MSDN о создании живых плиток.
Цветные элементы браузера
Используя различные элементы meta, вы можете настраивать браузер и даже элементы платформы. Имейте в виду, что некоторые из них могут работать только на определенных платформах или в определенных браузерах, но они могут значительно улучшить работу.
Chrome, Firefox OS, Safari, Internet Explorer и Opera Coast позволяют задавать цвета для элементов браузера и даже платформы с помощью метатегов.
Цвет метатемы для Chrome и Opera
Чтобы задать цвет темы для Chrome на Android, используйте метатег theme-color.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Стили для Safari
В Safari можно настроить стиль строки состояния и указать изображение, которое будет показываться при запуске.
Укажите изображение для заставки
По умолчанию Safari показывает пустой экран во время загрузки и после нескольких загрузок скриншот предыдущего состояния приложения. Вы можете предотвратить это, указав Safari показывать явное изображение запуска, добавив тег ссылки с rel=apple-touch-startup-image. Пример:
<link rel="apple-touch-startup-image" href="icon.png">
Изображение должно соответствовать размеру экрана целевого устройства, иначе оно не будет использоваться. Дополнительную информацию можно найти в правилах в отношении веб-контента для Safari.
Хотя в документации Apple эта тема освещена недостаточно, сообщество разработчиков нашло способ настраивать таргетинг на все устройства, используя расширенные запросы медиа для выбора подходящего устройства и указания правильного изображения. Вот рабочее решение, предоставленное tfausak's gist
Как изменить внешний вид строки состояния
Вы можете изменить внешний вид строки состояния по умолчанию на black или black-translucent. В black-translucent строка состояния плавает поверх полноэкранного контента, а не сдвигает его вниз. Это увеличивает высоту макета, но закрывает верхнюю часть. Вот код, который нужно добавить:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black