자바 스크립트를 통해 ipad / iphone webview 감지

Question 1

웹 사이트가 ipad safari 내부 또는 응용 프로그램 WebView 내부에서 실행되는 경우 javascript를 통해 다른 방법이 있습니까?

Question 2

이것은 window.navigator.userAgent및 의 조합을 사용합니다 window.navigator.standalone. iOS 웹 앱과 관련된 네 가지 상태를 모두 구분할 수 있습니다 : safari (브라우저), 독립 실행 형 (전체 화면), 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

iPad의 Safari에서 실행

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

Mac OS X의 Safari에서 실행

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의 Chrome에서 실행

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의 FireFox에서 실행

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

이 모든 솔루션을 시도했지만 제 경우에는 작동하지 않았으며 Webview에서 Telegram
을 감지하려고했습니다 . 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의 솔루션은 더 이상 작동하지 않으며 (댓글 참조) 단순화 할 수 있습니다. 반면에 UA에서 "Safari"만 테스트하면 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');
}

제 경우에는 모든 웹뷰를 잡을 필요는 없었지만 카메라 / 마이크 입력을 지원하지 않는 것들 (알림 : 경고는 Webview에서 트리거되지 않으므로 디버그 목적으로 DOM에서 무언가를 변경해야합니다)

Question 10

이 코드는 홈 화면에 추가 된 아이콘에서 액세스되고 있는지 확인합니다.

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

하지만 UIWebView에서 어떻게 반응할지 잘 모르겠습니다. 내가 생각할 수있는 유일한 다른 솔루션은 사용자 에이전트를 가져 오거나 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType액세스중인 페이지의 쿼리 문자열을 사용하고 페이지가 웹보기에서 액세스되고 있음을 식별하는 데 사용하는 것으로 대체하는 것입니다.

Question 11

Modernizr 사용을 제안 하고 이와 같이 indexeddb를 확인 합니다 . 사용자 에이전트 구성 (장치, OS, 브라우저 등)과 교차 확인할 수 있지만 순수한 기능 감지가 더 권장되는 것 같습니다.

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 또는 디스플레이 이미지 등을 실행하길 원하는지 ...

브라우저에서 플래시를 지원하는지 또는 브라우저에서 이미지를 표시하는지 여부를 확인하거나 화면 크기를 확인하고 싶을 수도 있습니다.