javascript aracılığıyla ipad / iphone web görünümünü algılama

91

Web sitesi ipad safari içinde veya bir uygulama WebView içinde çalışıyorsa, javascript ile farklı olmanın bir yolu var mı?

javascript  ipad  ios  webview 
— çim
kaynak
Bu sadece iOS cihazlar için mi?
— Nicolas S

Yanıtlar:

80

Bu bir arada kullanan window.navigator.userAgentvewindow.navigator.standalone . Bir iOS web uygulamasıyla ilgili dört durumu birbirinden ayırt edebilir: safari (tarayıcı), bağımsız (tam ekran), uiwebview ve iOS değil.

Demo: http://jsfiddle.net/ThinkingStiff/6qrbn/

var standalone = window.navigator.standalone,
    userAgent = window.navigator.userAgent.toLowerCase(),
    safari = /safari/.test( userAgent ),
    ios = /iphone|ipod|ipad/.test( userAgent );

if( ios ) {
    if ( !standalone && safari ) {
        //browser
    } else if ( standalone && !safari ) {
        //standalone
    } else if ( !standalone && !safari ) {
        //uiwebview
    };
} else {
    //not iOS
};
— ThinkingStiff
kaynak
chrome, SafariuserAgent içinde bulunur. webcal://.ics dosyaları için protokol gerektirme konusunda farklı davranıyor
— neaumusic
@svlada daha fazla bilgi verebilir misiniz? Cihazınız ve iOS sürümü neydi?
— sonlexqt
78

Kullanıcı Aracıları

UIWebView'da çalışıyor

Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/98176

İPad'de Safari'de çalıştırma

Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3

Safari'de Mac OS X'te çalıştırma

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3

Mac OS X'te Chrome'da çalışıyor

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.151 Safari/535.19

Mac OS X'te FireFox'ta çalıştırma

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:11.0) Gecko/20100101 Firefox/11.0

Algılama Kodu

var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
var is_safari_or_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);
— neoneye
kaynak
Gerçekten mi. İlk başta neden her iki kullanıcı aracısına kendim baktığımı bilmiyorum. Cevabınız için teşekkürler :)
— sod
4
İPhone 5s / iOS 7 üzerinde çalışmıyor, çünkü hem UIWebViewSafari hem de Safarikullanıcı aracısında
— Razor
@ Razor Haklısın. Karşı test Versionaksine Safarison iOS benim için çalıştı.
— unceus
1
@unceus Ne demek istediğini tam olarak açıklayabilir misin Version? Değiştirmek Do Safariile Versionde var is_uiwebviewhat?
— Henrik Petterson
@HenrikPetterson Kullanıcı aracısı dizeleriyle ilgili olarak, yukarıdaki ilk iki kullanıcı aracısı dizesini (iPad'de UIWebView ve Safari) karşılaştırdığımızda UIWebView dizesi 'version' içerirken ipad dizesi içermez. Normal ifadeyi değiştirmeyle ilgili amacınız açık değil ve bir tane yazmak için yardım arıyormuşsunuz gibi görünüyor.
— unceus
10

Sanırım sadece User-Agent.

GÜNCELLEME

İPhone Safari kullanılarak göz atılan sayfa 

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7

UIWebView ile bir saniye içinde deneyeceğim

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Mobile/8B117

Aradaki fark, Safari'nin Safari/6531.22.7

Çözüm

var isSafari = navigator.userAgent.match(/Safari/i) != null;
— Nicolas S
kaynak
Evet, ama User-Agent'ta UIWebView'ı algılayacak belirli bir dizge veya başka bir şey olup olmadığına dair herhangi bir fikriniz var mı? Şimdiye kadar hiçbir şey bulamadım ...
— Adam Tal
Bu sadece iOS cihazlar için mi?
— Nicolas S
Nicolas şu anda rakamlar farklı olacak çünkü Safari ve UIWebView (ve "bağımsız" - yani ana ekran - web uygulamaları) farklı motorlar kullanıyor. Bu iOS 5'te değişiyor
— Ben
Sayıları kastetmiyorum Safari/....., UIWebView'da eksik olduğunu kastediyorum
— Nicolas S
@Nicolas: Tamamen haklısın, üzgünüm dikkat etmiyordum. Acaba iOS5'te durumun hala geçerli olup olmadığını kimse doğrulayabilir mi?
— Ben
7

Evet:

// is this an IPad ?
var isiPad = (navigator.userAgent.match(/iPad/i) != null);

// is this an iPhone ?
var isiPhone = (navigator.userAgent.match(/iPhone/i) != null);

// is this an iPod ?
var isiPod = (navigator.userAgent.match(/iPod/i) != null);
— John Doherty
kaynak
11
Bu sadece WebView ile değil Safari tarayıcısıyla da eşleşecektir.
— Petr Peller
@ThinkingStuff - Mac OS (masaüstü tarayıcısı) ile iPad Safari tarayıcısı arasında ayrım yapmama yardım eder misiniz - stackoverflow.com/questions/58344491/…
— newdeveloper
6

Tüm bu çözümleri denedim ama benim durumumda işe yaramadı, Webview içinde Telegram'ı
tespit edecektim . Safari'nin telefon stili metnini "tel:" ön ekiyle değiştirdiğini fark ettim, bu yüzden bu kodu yazmak için bunu kullandım, test edebilirsiniz: jsfiddle

<!DOCTYPE html>
<html>
<head></head>
<body>
<ul id="phone" style="opacity:0">
    <li>111-111-1111</li>
</ul>
</body>
</html>

<script>

    var html = document.getElementById("phone").innerHTML;

    if (navigator.platform.substr(0,2) === 'iP') {

        if (html.indexOf('tel:') == -1)
            alert('not safari browser');
        else
            alert('safari browser');
    }
    else
        alert('not iOS');
</script>
— Amir Khorsandi
kaynak
1
Böyle bir numaraya güvenmemelisiniz çünkü kullanıcı veya diğer geliştiriciler telefon algılamayı devre dışı bırakabilir.
— Бодров Андрей
@ БодровАндрей Size katılıyorum, ancak bulabilmemin tek yolu buydu, umarım apple gelecekte bunun için farklı bir Kullanıcı-Temsilci sağlar
— Amir Khorsandi
Bunun iOS 13'te borken olduğuna dikkat edin, çünkü Masaüstü Modu kullanılıyorsa, o zaman navigator.platform === 'MacIntel'. Bu, varsayılan olarak Masaüstü Modunu kullandığından özellikle iPadOS 13 Mobile Safari'yi etkiler.
— robocat
@robocat haklısın. iOS 13 iPad'de bozuk ve şu anda bir çözüm olmadan sıkıştım. Lütfen ilgili soru için bana yardım eder misiniz stackoverflow.com/questions/58344491/…
— newdeveloper
2

Neoneye'nin çözümü artık çalışmıyor (yorumlara bakın) ve basitleştirilebilir. Öte yandan, UA'da sadece "Safari" yi test etmek, ios el cihazlarından çok daha fazlasını adreslemektedir.

Bu benim kullandığım test:

var is_ios = /(iPhone|iPod|iPad).*AppleWebKit.*Safari/i.test(navigator.userAgent);
— eosfer
kaynak
2

Bu yaklaşımın iOS 10 ve daha eski sürümler için çalışmadığını unutmayın.

2018 İlkbaharı için önerilen yöntemlerin hiçbiri benim için işe yaramadı, bu yüzden yeni bir yaklaşım buldum (userAgent tabanlı olmayan):

const hasValidDocumentElementRatio =
  [ 320 / 454 // 5, SE
  , 375 / 553 // 6, 7, 8
  , 414 / 622 // 6, 7, 8 Plus
  , 375 / 812 // X
  , 414 / 896 // Xs, Xr
  ].some(ratio =>
    ratio === document.documentElement.clientWidth / 
      document.documentElement.clientHeight
  )

const hasSafariInUA = /Safari/.test(navigator.userAgent)

const isiOSSafari = hasSafariInUA && hasValidDocumentElementRatio  // <- this one is set to false for webviews

https://gist.github.com/BorisChumichev/7c0ea033daf33da73306a396ffa174d1

Kodları iPad cihazları için de genişletebilirsiniz, bence hile yapmalı.

Telegram, Facebook, VK web görünümleri için iyi çalıştı.

— Boris Chumichev
kaynak
İPhone X için 375/812, ayrıca yeni: iPhone Xs Max / Xr için 414/896
— Oleg Dater
1

Working 15.02.19

İOS'ta web görüntülemelerini algılamak için başka bir çözüm, desteğini / varlığını kontrol etmektir navigator.mediaDevices.

if (navigator.mediaDevices) {
    alert('has mediaDevices');
} else {
    alert('has no mediaDevices');
}

Benim durumumda, tüm web görüntülemelerini yakalamama gerek yoktu, ancak kamera / mikrofon girişini desteklemeyenler (Hatırlatma: Uyarılar Web görünümünde tetiklenmez, bu nedenle hata ayıklama amacıyla etki alanında bir şeyi değiştirdiğinizden emin olun)

— Vinni
kaynak
0

Bu kodun ana ekrana eklenen bir simgeden erişilip erişilmediğini kontrol edeceğini biliyorum:

if (window.navigator.standalone == true) {
//not in safari
}

ancak bir UIWebView'da nasıl tepki vereceğinden emin değilim. Aklıma gelen diğer tek çözüm, kullanıcı aracısını almak veya - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationTypeerişmekte olduğunuz sayfanın sorgu dizesini, sayfanın bir web görünümünden erişildiğini belirlemek için kullandığı bir şeyle değiştirmektir.

— Preston
kaynak
Teşekkürler, o kodu kullanıyordum ama daha fazla kontrole ihtiyacım var. Görünüşe göre yalnızca bağımsız modu tespit ediyor ve gerisini Safari olarak kabul ediyor.
— Adam Tal
0

Kullanarak öneririm Modernizr ve benzeri IndexedDB için denetleme bu . Bunu kullanıcı aracısı yapılandırmasıyla (cihaz, işletim sistemi, tarayıcı vb.) Çapraz kontrol edebilirsiniz, ancak saf özellik algılaması daha çok tavsiye edilir.

— jiku
kaynak
Bir plana benziyor ama hangi özellikleri test ederdiniz? indexeddb, ie, chrome, firefox vb'nin bir parçasıdır
— SSED
0

Buna en son ihtiyacım olduğunda (SADECE WebView amaçları için), şu kontrolü kullandım:

function isIOS() {
     return !/safari/.test( window.navigator.userAgent.toLowerCase()) || navigator.platform === 'iOS' || navigator.platform === 'iPhone';
}
— CatalinBerta
kaynak
Bu, iOS13 Masaüstü Modunda (platform artık iPad veya iPhone'a ayarlı değildir) ve iPod touch'ta (platform "iPod" veya "iPod touch" olabilir) bozulmuştur.
— robocat
0

İPhone veya iPad'i tespit etmek için basit bir çözüm buldum. Bu benim için iyi çalışıyor.

var is_iPad = navigator.userAgent.match(/iPad/i) != null;
var is_iPhone = navigator.userAgent.match(/iPhone/i) != null;
    if(is_iPad || is_iPhone == true){
        //perform your action
    }
— Vijay Dhanvai
kaynak
0

IOS 13 ile Deneyin

      function mobileDetect() {


    var agent = window.navigator.userAgent;
    var d = document;
    var e = d.documentElement;
    var g = d.getElementsByTagName('body')[0];
    var deviceWidth = window.innerWidth || e.clientWidth || g.clientWidth;

    // Chrome
    IsChromeApp = window.chrome && chrome.app && chrome.app.runtime;

    // iPhone
    IsIPhone = agent.match(/iPhone/i) != null;

    // iPad up to IOS12
    IsIPad = (agent.match(/iPad/i) != null) || ((agent.match(/iPhone/i) != null) && (deviceWidth > 750)); // iPadPro when run with no launch screen can have error in userAgent reporting as an iPhone rather than an iPad. iPadPro width portrait 768, iPhone6 plus 414x736 but would probably always report 414 on app startup

    if (IsIPad) IsIPhone = false;

    // iPad from IOS13
    var macApp = agent.match(/Macintosh/i) != null;
    if (macApp) {
        // need to distinguish between Macbook and iPad
        var canvas = document.createElement("canvas");
        if (canvas != null) {
            var context = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
            if (context) {
                var info = context.getExtension("WEBGL_debug_renderer_info");
                if (info) {
                    var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL);
                    if (renderer.indexOf("Apple") != -1) IsIPad = true;
                }
                ;
            }
            ;
        }
        ;
    }
    ;

    // IOS
    IsIOSApp = IsIPad || IsIPhone;

    // Android
    IsAndroid = agent.match(/Android/i) != null;
    IsAndroidPhone = IsAndroid && deviceWidth <= 960;
    IsAndroidTablet = IsAndroid && !IsAndroidPhone;



    message = ""


    if (IsIPhone) {

        message = "Device is IsIPhone"


    }
    else if (IsIPad) {

        message = "Device is ipad"

    } else if (IsAndroidTablet || IsAndroidPhone || IsAndroid) {

        message = "Device is Android"


    } else {

        message = "Device is Mac ||  Windows Desktop"

    }


    return {

        message: message,

        isTrue: IsIOSApp || IsAndroid || IsAndroidTablet || IsAndroidPhone

    }

}



const checkMobile = mobileDetect()

alert(checkMobile.message + "  =====>  " + checkMobile.isTrue)
— Mahmoud D. Alghraibeh
kaynak
-2

İstemci tarafı Javascript'te kullanabileceğiniz belirli bir şey olduğunu sanmıyorum, ancak başlangıçtaki UIWebView'in neler yapabileceğini kontrol edebiliyorsanız, oluşturduğu kullanıcı aracısı dizesiyle oynamayı ve bunu test etmek isteyebilirsiniz. bunun yerine istemci tarafı Javascript? Biliyorum biraz hack, ama hey… Bu soru, kullanıcı aracısında ince ayarlamalar yapmak için bazı ipuçları verebilir:

UIWebView'da (iPhone SDK) Kullanıcı Aracısını Değiştirin

— Ben
kaynak
Teşekkürler Ben. Maalesef uygulamanın UIWebView kullanıcı aracısı üzerinde kontrolüm yok.
— Adam Tal
-7

@ Sod, Cevabım yok, ancak neden kontrol etmek istediğinize ikna olmadım, Tarayıcı motorunun safari (Tarayıcı) veya Uygulama yalnızca Webkit ile aynı olup olmayacağına göre, Evet Uygulama Tarayıcı motoru özelliklerini şu şekilde yapılandırabilir: , uygulamanın JS veya Display Image vb. çalıştırmak isteyip istemediği…

Sanırım, Flash'ın Tarayıcı tarafından desteklenip desteklenmediğini veya tarayıcının görüntü gösterip göstermediğini kontrol etmelisiniz, yoksa muhtemelen ekran boyutunu kontrol etmek isteyebilirsiniz,

— Amitg2k12
kaynak
bunu yorumlarda tartışabilirsiniz. Her neyse, wevbview'i kontrol etmek için birçok vaka var
— Yozi
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.