Как добавить иконки сайтов на вкладки Safari на iPhone, iPad и Mac (macOS)


Закрепленные вкладки и другие UI-изменения

Сразу хочется упомянуть про фичи для широкого круга пользователей, такие как (очевидно) новый системный шрифт San Francisco, прозрачная строка состояния (status bar), возможность выключать звук у разных вкладок отдельно и новая фича — закрепленные вкладки.

По умолчанию Safari берет первую букву вашего доменного имени и окрашивает квадрат вокруг нее в цвет, который является преобладающим в вашей favicon. Но продвинутые разработчики могут указать необходимую мета-инфорацию, чтобы сделать свою иконку.

Например, Instagram сделали это так:

Два мета-тега, в одном из них ссылка на SVG-иконку, во втором написан цвет, в который окрашивать. Вот выдержка из документации Apple по этому поводу:

You can set the icon that the user sees when they pin your site by providing a vector image. Use 100% black for all vectors with a transparent background in SVG format and add the following markup to all webpages that the icon should represent.

От чего-то наш код работать отказывается. Будем пробовать и ждать следующих релизов. Фича полезная и интересная с точки зрения UX.

Обновлено 27 апреля 2020 года: Спустя несколько месяцев, в релизной версии всё уже работало. Работает и до сих пор.

Safari перестал воспроизводить 4K-видео на YouTube

Если вы хотите на своих «яблочных» устройствах смотреть видео в хорошем разрешении, тогда вам предстоит установить на свой ноутбук или компьютер сторонний веб-обозреватель, ведь стандартный браузер Safari, который установлен в качестве штатного, больше не поддерживает воспроизведение на YouTube видео очень высокого качества.

Не так давно пользователи устройств Apple стали жаловаться на то, что в фирменном браузере при открытии сайта популярного видеохостинга перестало воспроизводиться видео разрешения 2К и 4К. Что самое интересное, в настройках стандартного видеоплеера попросту пропала возможность выбрать высокое разрешение. Таким образом, максимально возможным разрешением для пользователей Safari стало 1080р. Однако если запустить такое же видео в любом другом доступном браузере, то пользователь без проблем сможет смотреть виде очень высокого качества. В чем же проблема?

Как оказалось, видео в высоком разрешении невозможно воспроизвести из-за того, что браузер Safari до сих пор не получил необходимый кодек. Дело в том, что на серверах видеохостинга YouTube абсолютно все видео хранится в разных форматах, чтобы его было удобно воспроизводить при заданных пользователем параметрах. Независимо от формата кодируется оно с помощью двух стандартных кодеков. Это H264 или VP9. С первым у Safari не возникает абсолютно никаких проблем и видео воспроизводится корректно, а вот как раз поддержка VP9 так и не появилась в фирменном браузере Apple. Именно из-за этого видео в большом разрешении перестало воспроизводиться.

Стоит отметить, что достаточно продолжительное время кодек H264 считается общепринятым стандартом, поэтому его поддерживают все браузеры. А VP9 активно начал применяться стал только недавно. Компания Google решила, что все видео, имеющее высокое разрешение, обязательно должно кодироваться с помощью нового видеокодека. Он позволяет при воспроизведении видео через Интернет сохранить высокое качество, но в то же время значительно снизить нагрузку на Сеть.

Сама компания Google позаботилась о том, чтобы этот кодек в фирменном браузере Chrome был активирован по умолчанию, поэтому проблем с воспроизведением высококачественного видео не возникает. А у Safari на десктопных и мобильных устройствах с этим возникают сложности. Так что если вы не собираетесь устанавливать на свое устройство дополнительный веб-обозреватель, то вам придется довольствоваться только лишь качеством 1080р.

Инструменты разработчика

Новые инструменты разработчика теперь разделены на вкладки, которые можно переставлять местами, включать/выключать и кастомизировать по своему усмотрению. Инспектор элементов находится отдельно от инспектора ресурсов.

Дополнительно во вкладке «шкала времени» теперь добавлен инструмент для профилирования фронт-енда — «отрисвока кадров», который показывает вам из-за чего фреймрейт на странице проседает ниже заветных 60 кадров в секунду.

Отладчик теперь показывает типы переменных (включая ECMAScript 6 классы) и более подробно показывает ошибки там, где они возникают.

Кроме этого в инспекторе элементов теперь можно включить подсветку обновляемых областей, что поможет видеть какие именно элементы страницы полностью перерисовываются и замедляют рендеринг. Отличный инструмент в руках опытного верстальщика!

Как отключить автовоспроизведение видео в Safari на Mac

Изменив эту настройку, вы остановите автовоспроизведение всех видео в Safari, и вам придётся дважды нажимать на них, чтобы включить.

  1. Закройте Safari на Mac.
  2. Откройте программу Terminal на MacOS, которую можно найти в /Applications/Utilities/.
  3. Введите следующую команду, она включит меню Debug в Safari:

defaults write com.apple.Safari IncludeInternalDebugMenu 1

  1. Нажмите Enter, чтобы запустить команду.
  2. Откройте Safari на Mac и зайдите в только что активированное меню «Debug». Выберите вкладку «Media Flags», а затем «Disallow inline video».

  1. Обновите страницы, чтобы настройка активировалась на них.

Можете попробовать сами – откройте любую страницу с автовоспроизводящимся видео, и оно больше не запустится. Например, любое случайное видео на YouTube или эту страницу на Bloomberg.com. Обычно видео воспроизводятся сами сразу же после загрузки, но с этой настройкой они перестанут. Теперь вам нужно разрешить видеозаписи загрузиться, а затем включить её.

Помните, что отключая «inline video» (в данном случае автовоспроизведение), вы отключаете в Safari возможность воспроизводить любое видео без разрешения пользователя. Даже видео на YouTube и на Vimeo перестанут загружаться автоматически, пока вы не нажмёте на «play». Некоторые пользователи считают это слишком неудобным и сразу же стараются снова активировать автовоспроизведение видео.

Режим отзывчивого дизайна

Еще в Safari 9 вас ждет новый инструмент «режим отзывчивого дизайна», который больше походит на какое-то очень крутое расширение для тестирования адаптивной верстки. С его помощью вы сможете использовать всю мощь новых инструментов разработчика и тестировать верстку ваших сайтов на всех экранах.

Есть как предустановленные разрешения, так и три свободных слота для пользовательских разрешений. Дополнительно можно эмулировать плотность пикселей и менять строку User Agent.

Полный экран api HTML5 и Safari (iOS 6)

Я пытаюсь сделать приложение для запуска в полноэкранном режиме (без верхней панели) в Safari для iOS 6. Код выглядит следующим образом:

var elem = document.getElementById(«element_id»); if (elem.requestFullScreen) { elem.requestFullScreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen(); }

Он хорошо работает в настольных браузерах. Но в Мобиле Safari (iOS) 6 не работает.

Есть идеи по этому поводу?

html5 api mobile-safari ios6 fullscreen

Источник R.C.
10 октября 2012 в 15:13

7 Ответов

20

Это не поддерживается…

https://caniuse.com/fullscreen

ndm
10 октября 2012 в 15:36
6

Вы не можете использовать полный экран. Если вы правильно настроили мета-теги и разместили веб-приложение на главном экране, то вы можете избавиться от всех safari cruft, но у вас все еще остается строка состояния iOS (подключение, часы, батарея).

Есть целый ряд ресурсов для этого, вот тот, который я использую:

https://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Документации Apple является хорошо, как хорошо:

https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Но, короче говоря, вы не можете, начиная с iOS 6.1, развернуть полноэкранное веб-приложение на iOS устройствах. Строка состояния будет присутствовать всегда.

Adam Davis
10 мая 2013 в 15:37
6

Через шесть лет после того, как был задан этот вопрос…, полноэкранный режим «webkit» с префиксом API теперь, похоже, работает в mobile Safari в iOS 12.1 на iPad, но не на iPhone. Похоже, что об этом еще не сообщалось в CanIUse , и единственная информация Apple, которую я нашел до сих пор, — это строки о iOS 12 на странице «What’s New in Safari» и заметки о выпуске и твит :

Вчера я обновил свои iPhone и iPad до iOS 12.1 с iOS 11.x. Полный экран API работает для меня в Safari на iPad, но не на iPhone. На iPad, «предупреждение(document.fullscreenEnabled)» отображает «undefined», но «предупреждение(document.webkitFullscreenEnabled)» отображает «true». На iPhone-м оба показывают «undefined».

Играя со следующим скриптом, я могу отображать в полноэкранном режиме в Safari на iPad.

#target { width: 150px; height: 100px; padding: 50px 0 0 0; margin: 50px auto; text-align: center; background-color: tan; } Click or touch me (function(w) { «use strict»; var d = w.document; var t = d.getElementById(«target»); t.addEventListener(«click», function() { d.documentElement.webkitRequestFullscreen(); // Compare alternative to preceding line, calling // method on target element instead: // t.webkitRequestFullscreen(); // And compare changing target’s style on change: // t.style.width = «100%»; // t.style.height = «100%»; }); // alerts «undefined» in iOS 12.1 Safari on iPad and iPhone alert(d.fullscreenEnabled); // alerts «true» in iOS 12.1 Safari on iPad, «undefined» on iPhone alert(d.webkitFullscreenEnabled); }(window));

При отображении в полноэкранном режиме, Safari на iPad вставляет элемент «X» UI в верхнем левом углу, чтобы коснуться для выхода из полноэкранного режима.

Игра с демонстрационной страницей полноэкранного учебника 2014 года API в Site Point также хорошо работала на моем iPad. Будьте осторожны, играя со старой, устаревшей демо-страницей 2012 версии учебника Site Point дважды заморозил мой iPad в Safari, и мне пришлось перезагрузить iPad, чтобы убежать.

Игра с демонстрационной страницей библиотеки screenfull.js также хорошо работала на моем iPad.

Slack Undertow
04 ноября 2020 в 22:08
3

https://developer.apple.com/reference/webkitjs/htmlvideoelement

if (elem.webkitEnterFullScreen) { elem.webkitEnterFullScreen(); }

Это работает на меня.

May Peng
15 марта 2020 в 08:35
1

Далее прокручивается строка состояния в iOS в сторону. Назовите его в начале вашего $(документа).готовый

$(‘body’).scrollTop(1);

На данный момент это работает до версии 6.x, но, похоже, не работает в бета-версии браузера iOS7. Как всегда, панель инструментов браузера внизу исправлена.

Victor
20 июня 2013 в 18:48
0

Существует действительно хороший хак для эмуляции полноэкранного режима, и пользователь может войти или выйти из него, как он хочет. Я действительно понятия не имею, почему он работает и работает ли вообще на других платформах, но на моем iPhone Safari он выглядит как ожидаемый.

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

Дайте вашему html и телу 100% высоту и ширину

html, body { /* Avoid ugly scrollbars */ overflow: hidden; /* Reset default browser paddings etc */ margin: 0; padding: 0; border: 0; /* 100% size */ width: 100%; height: 100%; }

А теперь самое банальное. Дайте вашему телу 1px запас в верхней части

body { margin-top: 1px; }

Последнее, что вам нужно сделать, это поместить все содержимое вашего веб-приложения в дополнительный div с фиксированной позицией, чтобы маржа не повлияла на него

.wrapper { position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; }

И вуаля. Поверните устройство и посмотрите, как эти уродливые навигационные панели исчезают. Идеально подходит для реальных полноэкранных игр.

Я уверен, что это можно как-то использовать в качестве полифайла, хотя не все хотят делать полноэкранную игру.

Я надеюсь, что это будет кому-то полезно.

Дарт Мун

Darth Moon
03 марта 2020 в 21:44
0

Он работает на iPhone (iOS 12.1.4), когда вы его включаете:

Настройки -> Safari — > Дополнительно — > Экспериментальные Функции -> Fullscreen API

Tom Andraszek
29 марта 2020 в 01:55

Как включить автовоспроизведение видео в Safari на Mac

Если вам не понравилась предыдущая настройка, и воспроизводить каждое видео вручную слишком сложно, просто активируйте автовоспроизведение снова:

  1. В Safari откройте меню «Debug», затем выберите вкладку «Media Flags» и снова нажмите на «Disallow inline video», чтобы убрать рядом с ним галочку.

  1. Обновите открытые страницы, и всё вернётся обратно.

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

*Safari на MacOS High Sierra 10.13 и выше позволяет отключить автовоспроизведение видео ещё легче. Так что эта инструкция относится к более ранним версиям MacOS и Safari.

Спрятанное меню «Debug» в Safari содержит ещё много полезных настроек, в особенности для веб-разработчиков. Так что если вы являетесь разработчиком в области дизайна, веб-страниц или просто программ, вам будет полезно и интересно изучить возможности этого меню. Большинство настроек меню «Debug» очень продвинутые, и они, определённо, не предназначены для общего пользования. И запомните, что если вы сильно заиграетесь с настройками меню, Safari может перестать работать исправно. Так что меняйте только те настройки, в которых разбираетесь, и которые вам необходимо поменять, не нажимайте на случайные пункты меню ради забавы (или хотя бы запоминайте, куда жмёте, чтобы потом вернуть всё обратно).

Рейтинг
( 1 оценка, среднее 4 из 5 )
Понравилась статья? Поделиться с друзьями: