Zastanawiam się, czy można wykryć, czy przeglądarka działa w systemie iOS, podobnie jak w przypadku funkcji wykrywania za pomocą Modernizr (chociaż jest to oczywiście wykrywanie urządzeń, a nie wykrywanie funkcji).
Zwykle wolałbym zamiast tego wykrywać funkcje, ale muszę dowiedzieć się, czy urządzenie ma system iOS ze względu na sposób, w jaki obsługują filmy zgodnie z tym pytaniem. Interfejs API YouTube nie działa z urządzeniem iPad / iPhone / innym niż Flash
javascript
ios
browser
browser-feature-detection
SparrwHawk
źródło
źródło
Odpowiedzi:
Wykrywanie iOS
Nie jestem fanem wąchania User User Agent, ale oto jak to zrobić:
Innym sposobem jest poleganie na
navigator.platform
:iOS
będzie albotrue
albofalse
Dlaczego nie MSStream
Microsoft wstrzyknął słowo iPhone do IE11
userAgent
, aby jakoś oszukać Gmaila. Dlatego musimy to wykluczyć. Więcej informacji na ten temat tutaj i tutaj .Poniżej znajduje się aktualizacja IE11 (aktualizacja
userAgent
Internet Explorer dla Windows Phone 8.1):Z łatwością dodawaj więcej urządzeń bez użycia wyrażeń regularnych:
iOS()
będzie albotrue
albofalse
Uwaga: Zarówno
navigator.userAgent
inavigator.platform
mogą być sfałszowane przez użytkownika lub rozszerzeniem przeglądarki.Wykrywanie wersji iOS
Najczęstszym sposobem wykrywania wersji iOS jest parsowanie jej z ciągu Agenta użytkownika . Ale istnieje również wnioskowanie o
wykrywaniufunkcji* ;Wiemy o tym, że
history API
został wprowadzony w iOS4 -matchMedia API
w iOS5 -webAudio API
w iOS6 -WebSpeech API
w iOS7 itd.Uwaga: poniższy kod nie jest niezawodny i ulegnie awarii, jeśli którakolwiek z tych funkcji HTML5 będzie przestarzała w nowszej wersji iOS. Zostałeś ostrzeżony!
źródło
var iOS = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15
więc odpowiedź musi zostać zaktualizowanaPo iOS 13 powinieneś wykryć takie urządzenia iOS, ponieważ iPad nie będzie wykrywany jako urządzenie iOS na stare sposoby (ze względu na nowe opcje „pulpitu”, domyślnie włączone):
Pierwszy warunek dla iOS <13 lub iPhone'a lub iPada z wyłączonym trybem Pulpit, drugi warunek dla iPadOS 13 w domyślnej konfiguracji, ponieważ ustawia się jak Macintosh Intel, ale tak naprawdę jest to jedyny Macintosh z funkcją Multi-Touch.
Raczej hack niż prawdziwe rozwiązanie, ale działaj niezawodnie dla mnie
PS Jak powiedziano wcześniej, prawdopodobnie należy dodać kontrolę IE
źródło
navigator.userAgent
tej kontroli/iPad|iPhone|iPod/.test(navigator.platform)
? Wygląda na to, żenavigator.platform
zawsze zwraca „MacIntel” na iPhone'a iOS <= 12navigator.maxTouchPoints
nie jest obsługiwany w iOS, więc czek nie zrobi nic dla ciebie.Ustawia zmienną
_iOSDevice
na true lub falseźródło
/iPhone|iPod|iPad/.test(navigator.platform)
można uniknąć!!
Jeśli korzystasz z Modernizr , możesz dodać niestandardowy test.
Nie ma znaczenia, z którego trybu wykrywania zdecydujesz się skorzystać (userAgent, navigator.vendor lub navigator.platform), zawsze możesz go zawinąć, aby ułatwić później.
źródło
return x ? true : false
doreturn Boolean(x)
lub po prostureturn !!x
Są to niestandardowe testy Modernizr: https://gist.github.com/855078
źródło
Uproszczona, łatwa do rozszerzenia wersja.
źródło
navigator.platform.replace(' Simulator', '')
.['str'].indexOf('string') == -1
Prawdopodobnie warto odpowiedzieć, że iPady z systemem iOS 13 będą
navigator.platform
ustawione naMacIntel
, co oznacza, że będziesz musiał znaleźć inny sposób wykrywania urządzeń iPadOS.źródło
Napisałem to kilka lat temu, ale wierzę, że nadal działa:
źródło
Programy klienckie na urządzeniach z iOS mówią w nich iPhone lub iPad. Po prostu filtruję według tych słów kluczowych.
źródło
O ile to możliwe, dodając testy Modernizr, należy dodać test funkcji, a nie urządzenia lub systemu operacyjnego. Nie ma nic złego w dodawaniu dziesięciu testów do testowania iPhone'a, jeśli tego właśnie potrzeba. Niektórych rzeczy po prostu nie można wykryć.
Na przykład wideo na iPhonie (nie na iPadzie) nie może być odtwarzane bezpośrednio na stronie internetowej, otwiera się pełny ekran. Więc stworzyłem test „wideo bez strony”
Możesz następnie użyć tego w css (Modernizr dodaje klasę
.no-inpagevideo
do<html>
tagu, jeśli test się nie powiedzie)To ukryje wideo na iPhonie (tak naprawdę robię w tym przypadku pokazując alternatywny obraz z kliknięciem, aby odtworzyć wideo - po prostu nie chcę, aby wyświetlał się domyślny odtwarzacz wideo i przycisk odtwarzania).
źródło
playsinline
więc możesz użyć'playsInline' in document.createElement('video');
jako testu teraz github.com/Modernizr/Modernizr/issues/2077Wow, dużo długiego, trudnego kodu tutaj. Proszę, zachowaj prostotę!
Ten jest szybki, zapisuj i działa dobrze IMHO:
AKTUALIZACJA: Nie dotyczy iPada w trybie pulpitu (a zatem domyślnego iPada 13).
To dobrze dla moich przypadków użycia, jeśli nie jest dla ciebie, zobacz odpowiedzi Justina i kikiwory.
źródło
iOS = /^(iPhone|iPad|iPod)/.test(navigator.platform);
zamiast tego zrobiłbym toiOS = /^(iPhone|iPad|iPod)/.test(navigator.userAgent || navigator.vendor || navigator.platform);
jako rozwiązanie awaryjne, ponieważ w moim przypadku navigator.plnavigator.platform
nie działało? Czy naprawdę jesteś na iOS? Sprawdź na stronie jeka.info/test/navigator.html .userAgent
daje fałszywie pozytywne wyniki, ponieważ niektórzy sprzedawcy podrobili to, aby naśladować urządzenia Apple z jakichkolwiek powodów.vendor
po prostu zwraca alboGoogle Inc.
,Apple Computer, Inc.
albo nic (Firefox).Nieznacznie zaktualizuj pierwszą odpowiedź, stosując bardziej funkcjonalne podejście.
źródło
MacIntel
Żadna z poprzednich odpowiedzi tutaj nie działa dla wszystkich głównych przeglądarek we wszystkich wersjach iOS, w tym iOS 13. Oto rozwiązanie, które działa w Safari, Chrome i Firefox dla wszystkich wersji iOS:
Pamiętaj, że ten fragment kodu został napisany z myślą o czytelności, a nie zwięzłości lub wydajności.
Wyjaśnienie:
Jeśli klient użytkownika zawiera którykolwiek z „iPod | iPhone | iPad”, to oczywiście urządzenie to iOS. W przeciwnym razie kontynuuj ...
Każdy inny klient użytkownika, który nie zawiera „Macintosh”, nie jest urządzeniem Apple i dlatego nie może być iOS. W przeciwnym razie jest to urządzenie Apple, więc kontynuuj ...
Jeśli
maxTouchPoints
ma wartość równą1
lub większą, to urządzenie Apple ma ekran dotykowy i dlatego musi być systemem iOS, ponieważ nie ma komputerów Mac z ekranami dotykowymi (podziękowania dla kikiwory za wzmiankęmaxTouchPoints
). Pamiętaj, że dotyczymaxTouchPoints
toundefined
iOS 12 i niższych, dlatego potrzebujemy innego rozwiązania dla tego scenariusza ...iOS 12 i poniżej mają dziwactwo, które nie istnieje w Mac OS. Dziwactwo polega na tym, że
volume
właściwościAudio
elementu nie można pomyślnie ustawić na żadną inną wartość niż1
. Wynika to z faktu, że Apple nie zezwala na zmiany głośności wAudio
elemencie dla urządzeń z systemem iOS, ale zezwala na system Mac OS. To dziwactwo może być wykorzystane jako ostateczna metoda zastępcza dla odróżnienia urządzenia iOS od urządzenia Mac OS.źródło
Możesz także użyć
includes
źródło
W moim przypadku agent użytkownika nie był wystarczająco dobry, ponieważ na iPadzie agent użytkownika był taki sam jak w Mac OS, dlatego musiałem zrobić paskudną sztuczkę:
źródło
Aby wykryć wersję iOS, należy zniszczyć agenta użytkownika za pomocą kodu JavaScript takiego:
źródło
var isiOSSafari = (navigator.userAgent.match(/like Mac OS X/i)) ? true: false;
źródło