Как определить ios js

Обновлено: 23.09.2022

Мне интересно, можно ли определить, работает ли браузер на iOS, подобно тому, как вы можете определить функции с помощью Modernizr (хотя это, очевидно, обнаружение устройства, а не определение функции).

Обычно вместо этого я бы предпочел обнаружение функций, но мне нужно выяснить, является ли устройство iOS из-за того, как они обрабатывают видео в соответствии с этим вопросом API YouTube не работает с iPad / iPhone / устройством без Flash

Я не сторонник прослушивания User Agent, но вот как это сделать:

Еще один способ – использовать navigator.platform:

iOS будет либо истинным, либо ложным

Почему не MSStream

Microsoft внедрила слово iPhone в userAgent IE11, чтобы как-то обмануть Gmail. Поэтому нам нужно его исключить. Подробнее об этом здесь и здесь.

Ниже представлен обновленный userAgent IE11 (обновление Internet Explorer для Windows Phone 8.1):

Mozilla/5.0 (мобильная версия; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 930), например iPhone OS 7_0_3 Mac OS X AppleWebKit/537. (KHTML, например, Gecko) Mobile Safari/537

Легко добавлять дополнительные устройства без использования регулярных выражений:

iOS() будет либо истинным, либо ложным

Самый распространенный способ определения версии iOS – это ее анализ в строке агента пользователя. Но есть и функция detection inference*;

Мы точно знаем, что API истории был представлен в iOS4 - API matchMedia в iOS5 - API webAudio в iOS6 - API WebSpeech в iOS7 и т. д.

Примечание. Следующий код ненадежен и сломается, если какая-либо из этих функций HTML5 будет объявлена ​​устаревшей в новой версии iOS. Вас предупредили!

Я написал это пару лет назад, но думаю, что оно все еще работает:

Если вы используете Modernizr, вы можете добавить для него собственный тест.

Неважно, какой режим обнаружения вы решите использовать (userAgent, navigator.vendor или navigator.platform), вы всегда можете свернуть его для более удобного использования позже.

Агенты пользователя на устройствах iOS говорят в них iPhone или iPad. Я просто фильтрую по этим ключевым словам.

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

Например, на iPhone (не iPad) видео нельзя воспроизвести прямо на веб-странице, оно открывается в полноэкранном режиме. Поэтому я создал тестовое видео без вставки

Затем вы можете использовать это в CSS (Modernizr добавляет к тегу класс .no-inpagevideo, если тест не пройден)

Это скроет видео на iPhone (на самом деле в этом случае я показываю альтернативное изображение с щелчком мыши для воспроизведения видео — я просто не хочу, чтобы отображался видеопроигрыватель по умолчанию и кнопка воспроизведения).

JavaScript

Сам код короткий и приятный. Однако я бы предпочел использовать метод проверки пользовательского агента на стороне сервера.

PHP

Что бы вы предпочли?

Последние функции

Как создать карточку Twitter
< /p>

Как создать карточку Twitter

Преобразование XML в JSON с помощью JavaScript

Преобразование XML в JSON с помощью JavaScript

Невероятные демонстрации

CSS Scope Styles

Стили с ограниченной областью действия CSS

Любимые демоверсии CodePen Криса Койера

Обсуждение

Большое спасибо за этот пост. У меня есть пара сайтов, на которых я хотел бы проверить это, чтобы увидеть, есть ли большая разница между ними.

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

Я бы предпочел мобильную таблицу стилей, но это определенно фрагменты кипера. Спасибо, Дэвид!

@Jeremy:
Было бы ужасной практикой не иметь большой ссылки на немобильную версию сайта, у которой должен быть способ определить, что такая ссылка была нажата. Я уверен, что люди, которые читают это, знают об этом, верно?

@Джереми Пэрриш: Хорошее замечание. В настоящее время я работаю над мобильным веб-сайтом, и это одно из соображений, которое я принял во внимание.

iPhone и iPod touch вполне способны отображать веб-сайт в полной версии, и навигация не представляет проблемы. Я бы предпочел иметь возможность/ссылку для перехода на мобильный сайт.

О, кстати, хороший сценарий, который можно было бы иметь в своем распоряжении.

Отличная статья и сценарий, как всегда, Дэвид.

Отличный совет, Дрю!Однако в вашем руководстве все правила перезаписи закомментированы — вы можете изменить это. Спасибо за комментарий!

Ой, спасибо за наводку, Дэвид, должно быть, пропустил это, когда я публиковал статью. Большое спасибо :)

Хороший скрипт, давно искал что-то подобное.
У меня есть еще один вопрос об iPhone:

Есть ли способ получить доступ к данным о местоположении (широта, долгота) iPhone с помощью PHP или другого языка?
Например: пользователь просматривает веб-сайт с помощью сафари, нажимает кнопку, которая отправляет его lat,lng на веб-сайт.
Это реализовано во многих приложениях, которые можно установить на iPhone (например, twitterfon), но я пытаюсь заставить его работать на веб-сайте.
Ура
Гарет

Я искал код, который работал у меня. Это было идеально
(у меня есть флеш-сайт, который нельзя просматривать на большинстве телефонов)
Однако на сайте, ориентированном на мобильные устройства, у меня есть ссылка на флеш-сайт без сниффера, который я считаю приемлемым обходным путем для человека, у которого были проблемы с ESPN, перенаправляющим его сайт фэнтези-футбола.

Большое спасибо за этот пост. Я искал простой метод javascript для обнюхивания iphone и перенаправления на отдельную страницу контента. Это сработало с первого раза! Большое спасибо за публикацию этого.

это отлично подходит для сайтов, полностью созданных на основе флэш-памяти… iPhone вообще НЕ может их отображать. Это именно то, что мне нужно, спасибо!

спасибо, я искал именно это!

@Mark Sanborn: Неправда, если сайт полностью на Flash! Этот скрипт идеально подходит для перенаправления на HTML-версию того же веб-сайта. Спасибо за сценарий. Надеюсь, что когда-нибудь iPhone сможет работать с Flash.

заработал javascript, но вдруг он перестал работать

эта версия .php и все остальные не работали

Параметры .htaccess также не работают

я скажу клиенту перейти на .mobi

необходимо показать домашнюю страницу без флеш-галереи

@danny: Очевидно, этот сценарий очень примитивен. Я бы предпочел не полагаться на другую службу, если в этом нет необходимости.

Да, вы можете использовать JavaScript для получения данных о местоположении следующим образом:

(Этот мой последний ответ был адресован @Gareth в ответ на его вопрос о том, можно ли получить геоинформацию с iPhone в веб-приложении.)

@Mark Sanborn: Особенно, если они основаны на флэш-памяти, верно?

@Mark Sanborn: Я устанавливаю перенаправление на index.html, и если с iPhone я перехожу на iphonehome.html, иначе на home.html
А затем я добавляю ссылку внизу iphonehome.html, чтобы перейти на домашнюю страницу. HTML. Поскольку в home.html нет редиректора javascript, они остаются там. У меня работает…

Обратите внимание, что использование strstr для определения того, находится ли одна строка внутри другой, не рекомендуется, и вместо этого следует использовать функцию strpos.

Я думаю, что это отлично подходит для веб-сайтов только на flash, которые создают другой веб-сайт специально для мобильных пользователей :)

Спасибо за информацию, мне всегда это было интересно.

Я получаю обнаружение iPhone, но мне интересно, есть ли у кого-нибудь хорошее руководство или решение для очень простого (HTML) или динамического (jQuery/JS) iPhone/мобильного сайта, который может ссылаться на изображение, ранее существовавшее на флэш-памяти. на основе сайта с глубокими ссылками и уникальными URL-адресами?

Для пояснения: я фотограф, и на моем сайте каждый файл изображения имеет уникальный URL-адрес. Каждое изображение находится в папке этой галереи на моем сервере, поэтому при посещении моего сайта на основе флэш-памяти мои изображения не блокируются в файле ударной волны или фильма из-за серверной CMS, поэтому я могу добавлять или удалять изображения.

Мы будем очень признательны за любую помощь, мысли или предложения.

Дэвид большое спасибо за эту информацию. Что нового в этом материале, где бы вы разместили это на своей флэш-странице? Спасибо за помощь

Не удается открыть страницу
«Safari не может открыть страницу, так как произошло слишком много переадресаций».

На iPhone правильный адрес мигает в адресной строке, а затем эта ошибка появляется на экране.

Большое спасибо за пост!
Есть ли способ создать «полный сайт» — ссылку на мобильный сайт без повторной переадресации обратно на мобильный сайт?

Это то, что я также хотел бы знать, Виктор Рейес, может быть, что-то вроде спецификатора переменной URL сработает..

попробуй, быстро беги :S

следуй за мной @mgpwr

Это то, что я также хотел бы знать, Виктор Рейес, может быть, что-то вроде спецификатора переменной URL сработает..

Этот скрипт обнаружит устройство, сравнивая шаблоны с заданной строкой User-Agent. Вы можете узнать информацию об устройстве, отображающем вашу веб-страницу:

  • мобильный или нет
  • если мобильный телефон или планшет
  • операционная система
  • Мобильный класс (A, B, C). ПРИМЕЧАНИЕ. Это полностью устарело: все современные устройства возвращают «A», поэтому в настоящее время это бесполезно.
  • конкретные версии (например, WebKit)

Текущая ветка master использует логику обнаружения из Mobile-Detect@2.8.37

Демо/проверку (извините за отсутствующий стиль) можно найти здесь.

TL;DR: вы не должны использовать эту библиотеку на своей HTML-странице, и она менее надежна при использовании на стороне сервера (Node.js)

Как упоминалось ниже, обнаружение на основе агента пользователя в большинстве случаев не является надежным решением, потому что:

Если вы все еще хотите (или должны) использовать эту библиотеку, вы всегда должны инкапсулировать ее в свой собственный код, потому что очень высока вероятность того, что вам придется немного изменить поведение или вы не будете удовлетворены результатом мобильного -detect.js. Не распространяйте использование MobileDetect на весь свой код! Как вы можете видеть в проблемах, есть некоторые «ошибки», запросы функций, запросы на включение, из-за которых люди не очень довольны работой MobileDetect. Но я не могу изменить его поведение от версии к версии, даже если бы это было разумно с точки зрения новых пользователей. Надеюсь, вы проявите понимание.

По крайней мере, есть способ исправить библиотеку (см. "Расширение" ниже).

Браузер

Node.js/Экспресс

Общие

Подробнее.

Есть некоторая документация, созданная JSDoc:

Побочные эффекты

Сценарий создает глобальное свойство MobileDetect .

Расширение Modernizr

При использовании Modernizr вы можете включить mobile-detect-modernizr.js . Он добавит классы CSS для мобильных устройств , телефонов , планшетов и мобильных устройств, если это применимо.

Вы можете легко расширить его, например. Android , iPhone и т. д.

Размер (байты)

  • разработка: 70168
  • уменьшено: 39585
  • минифицированный + gzip: 16556 ( cat mobile-detect.min.js | gzip -9f | wc -c )

Бауэр (который не следует использовать для новых проектов)

Node.js/npm

CDN – jsDelivr

Хотя не рекомендуется полагаться на внутренние методы или структуры MobileDetect, вы можете изменить поведение, заменив определенные внутренние методы своими собственными реализациями. Если вы считаете, что это единственная возможность, тогда взгляните на исходный код и примеры в тестах/spec/MobileDetectSpec.js (ищите «Расширяемость»).

Часто обнаружение устройств является первым решением, которое приходит вам на ум. Пожалуйста, рассмотрите возможность поиска других решений, таких как медиа-запросы и обнаружение функций (например, с Modernizr). Возможно, есть лучшие (проще, меньше, быстрее) библиотеки обнаружения устройств, поэтому здесь у вас есть список (порядок не имеет значения, кроме первого элемента):

  • ПРИМЕЧАНИЕ: возможно, этот список устарел. Пожалуйста, сообщите мне об альтернативах!
  • Modernizr В большинстве случаев лучшее решение: не использовать информацию об устройстве и версии, а определять функции (сенсорный экран, холст, . )
  • Mobile-Detect Облегченный класс PHP для обнаружения мобильных устройств (включая планшеты). Это «источник» этого проекта JavaScript, и если вы используете PHP на своем сервере, вы должны использовать его!
  • Обнаружение мобильных браузеров Обнаружение мобильных телефонов с открытым исходным кодом на многих языках и для веб-серверов (Apache, nginx, IIS). mobile-detect.js использует код этой библиотеки в качестве запасного варианта на случай неполного обнаружения регулярных выражений.
  • sebarmeli / JS-Redirection-Mobile-Site JS для обработки перенаправления на мобильную версию вашего сайта
  • dmolsen/Detector Detector – это простая библиотека для обнаружения браузеров и функций на основе PHP и JavaScript, которая может самостоятельно адаптироваться к новым устройствам и браузерам без необходимости извлечения информации из центральной базы данных браузеров.
  • matthewhudson/device.js Условный CSS и/или JavaScript в зависимости от операционной системы устройства, ориентации и типа
  • brendanlim/mobile-fu Автоматическое обнаружение мобильных запросов с мобильных устройств в вашем приложении Rails.
  • FormFactor FormFactor помогает настроить веб-приложение для различных форм-факторов, например когда делаете "мобильную версию", "телевизионную версию" и т.д.
  • UAParser.js Облегченный анализатор строк User-Agent на основе JavaScript

Статистика использования мобильных устройств

Если вам нужно предоставить статистику о том, сколько и какие мобильные устройства посещают ваш веб-сайт, вы можете создать статистику (данные и просмотры) с помощью hgoebl/mobile-usage. Существует множество крючков для настройки статистических расчетов в соответствии с вашими потребностями.

Лицензия MIT (см. файл LICENSE).

Ваш вклад приветствуется. Если вы хотите, чтобы новые устройства поддерживались, внесите свой вклад в Mobile-Detect.

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

React Native предлагает два способа организации кода и разделения его по платформам:

Некоторые компоненты могут иметь свойства, которые работают только на одной платформе. Все эти реквизиты помечены @platform и имеют небольшой значок рядом с ними на веб-сайте.

Модуль платформы

React Native предоставляет модуль, который определяет платформу, на которой работает приложение. Логику обнаружения можно использовать для реализации кода, зависящего от платформы. Используйте этот параметр, если только небольшие части компонента зависят от платформы.

Platform.OS будет называться ios при работе на iOS и android при работе на Android.

Также доступен метод Platform.select, который задает объект, ключи которого могут быть одним из 'ios' | «андроид» | 'родной' | 'default' возвращает наиболее подходящее значение для платформы, на которой вы сейчас работаете. То есть, если вы работаете на телефоне, ключи ios и android будут иметь преимущество. Если они не указаны, будет использоваться собственный ключ, а затем ключ по умолчанию.

Это приведет к тому, что контейнер будет иметь flex: 1 на всех платформах, красный цвет фона на iOS, зеленый цвет фона на Android и синий цвет фона на других платформах.

Поскольку он принимает любое значение, вы также можете использовать его для возврата компонентов, зависящих от платформы, как показано ниже:

Определение версии Android​

В Android модуль Platform также можно использовать для определения версии платформы Android, на которой работает приложение:

Примечание. В качестве версии указывается версия Android API, а не версия ОС Android. Чтобы найти сопоставление, обратитесь к истории версий Android.

Определение версии iOS

В iOS версия является результатом -[UIDevice systemVersion] , которая представляет собой строку с текущей версией операционной системы. Пример версии системы "10.3". Например, чтобы определить основной номер версии в iOS:

Расширения для конкретных платформ

Когда ваш код для конкретной платформы является более сложным, вам следует подумать о разделении кода на отдельные файлы. React Native обнаружит, когда файл имеет расширение .ios. или .андроид. расширение и загружать соответствующий файл платформы, когда это требуется от других компонентов.

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

Затем вы можете запросить компонент следующим образом:

React Native автоматически выберет нужный файл в зависимости от используемой платформы.

Читайте также: