виявити ipad / iphone веб-перегляд за допомогою

Question 1

Чи є спосіб відрізнятись за допомогою javascript, якщо веб-сайт працює всередині сафарі ipad або всередині програми WebView?

Question 2

Тут використовується комбінація window.navigator.userAgentі window.navigator.standalone. Він може розрізняти всі чотири стани, що стосуються веб-програми iOS: сафарі (браузер), автономний (повноекранний), uiwebview, а не iOS.

Демо: 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
};

Question 3

Агенти користувачів

Запуск в UIWebView

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

Запуск у Safari на iPad

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 на Mac OS X

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

Запуск у Chrome на Mac OS X

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

Запуск у FireFox на Mac OS X

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

Код виявлення

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);

Question 4

Я думаю, що ви можете просто використовувати User-Agent.

ОНОВЛЕННЯ

Сторінку переглядали за допомогою iPhone Safari

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

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

Різниця полягає в тому, що говорить один із Safari Safari/6531.22.7

Рішення

var isSafari = navigator.userAgent.match(/Safari/i) != null;

Question 5

Так:

// 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);

Question 6

Я спробував усі ці рішення, але в моєму випадку не працював,
я збирався виявити Telegram всередині Webview. Я помітив, що Safari змінює текст стилю телефону на посилання з префіксом "tel:", тому я використав це для написання цього коду, ви можете його протестувати: 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>

Question 7

Рішення Neoneye більше не працює (див. Коментарі) і може бути спрощене. З іншого боку, тестування лише "Safari" в UA вирішує набагато більше, ніж портативні пристрої ios.

Це тест, який я використовую:

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

Question 8

Зауважте, що такий підхід не працює для iOS 10 та старіших версій.

Навесні 2018 року жоден із запропонованих методів у мене не спрацював, тому я придумав новий підхід (який не заснований на userAgent):

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

Ви можете також розширити код для пристроїв iPad, я думаю, це повинно зробити трюк.

Добре працював для веб-переглядів Telegram, Facebook, VK.

Question 9

Working 15.02.19

Іншим рішенням для виявлення веб-переглядів на iOS є перевірка підтримки / існування navigator.mediaDevices.

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

У моєму випадку мені не потрібно було переглядати всі веб-перегляди, але ті, які не підтримують вхід камери / мікрофона (нагадування: Сповіщення не запускаються у веб-перегляді, тому переконайтеся, що щось змінилося в будинку для цілей налагодження)

Question 10

Я знаю, що цей код перевірить, чи доступ до нього здійснюється за допомогою значка, доданого на головний екран:

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

але я не впевнений, як би він реагував у UIWebView. Єдине інше рішення, про яке я міг подумати, - це отримання користувацького агента або використання - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationTypeта заміна рядка запиту сторінки, до якої ви отримуєте доступ, на те, що ця сторінка використовує для ідентифікації доступу до неї з веб-перегляду.

Question 11

Запропонував би використовувати Modernizr та перевіряти індексованість db таким чином . Ви можете перевірити це з конфігурацією агента користувача (пристрій, ОС, браузер тощо), але чисте виявлення функцій видається більш рекомендованим.

Question 12

Востаннє мені це було потрібно (ПРОСТО для цілей WebView), я використав цю перевірку:

function isIOS() {
     return !/safari/.test( window.navigator.userAgent.toLowerCase()) || navigator.platform === 'iOS' || navigator.platform === 'iPhone';
}

Question 13

Я знайшов просте рішення для виявлення iPhone або iPad. Це для мене добре працює.

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
    }

Question 14

Спробуйте за допомогою IOS 13

      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)

Question 15

Я не думаю, що є щось конкретне, що ви можете використовувати в клієнтському Javascript, але якщо у вас є контроль над тим, що може зробити початковий UIWebView, ви можете розглянути можливість відтворення з рядком агента користувача, який він генерує, і тестування на це у вашому клієнтський Javascript замість цього? Я знаю трохи хакерства, але привіт ... Це питання може дати деякі рекомендації щодо налаштування користувацького агента:

Змінити агента користувача в UIWebView (iPhone SDK)

Question 16

@ Sod, ну, у мене немає відповіді, але я не впевнений, чому ви хочете перевірити, оскільки браузерний механізм, чи його сафарі (браузер) чи додаток буде однаковим лише його Webkit, так, програма може налаштувати можливості браузера, наприклад , чи хоче додаток запустити JS або відобразити зображення тощо ...

Я вважаю, ви повинні перевірити наявність певних властивостей, чи підтримує Flash браузер, чи браузер відображає зображення чи ні, або, можливо, ви хотіли б перевірити розмір екрану,