사용자가 모바일 Safari에서 탐색했는지 확인

사용자가 모바일 Safari에서 탐색했는지 확인

저는 앱을 가지고 있고, 사용자들이 어디에서 탐색하는지에 따라 다른 페이지로 리디렉션하고 싶습니다.

웹 클립에서 탐색하는 경우 리디렉션하지 마십시오.모바일 Safari에서 탐색하는 경우 safari.aspx로 리디렉션합니다.다른 곳에서 탐색하는 경우 unavailable.aspx로 리디렉션합니다.

아이폰 웹앱을 사용할 수 있었는데, 어떻게 로딩됐는지 감지할 수 있는 방법이 있나요? 홈 화면과 Safari?를 비교하여 사용자가 웹 클립에서 탐색했는지 확인할 수 있지만 사용자가 iPhone 또는 iPod의 모바일 Safari에서 탐색했는지 확인하는 데 문제가 있습니다.

제가 가진 것은 다음과 같습니다.

if (window.navigator.standalone) {
    // user navigated from web clip, don't redirect
}
else if (/*logic for mobile Safari*/) {
    //user navigated from mobile Safari, redirect to safari page
    window.location = "safari.aspx";
}
else {
    //user navigated from some other browser, redirect to unavailable page
    window.location = "unavailable.aspx";
}

https://developer.chrome.com/multidevice/user-agent#chrome_for_ios_user_agent 참조 - iOS의 Safari와 iOS의 Chrome의 사용자 에이전트 문자열이 불편하게 유사합니다.

크롬

Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en) AppleWebKit/534.46.0 (KHTML, like Gecko) CriOS/19.0.1084.60 Mobile/9B206 Safari/7534.48.3

사파리

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

여기서 가장 좋은 접근 방식은 다른 답변에서 제안한 대로 iOS를 먼저 확인한 다음 Safari UA를 고유하게 만드는 것으로, "Is Apple WebKit and not CryOS"로 가장 잘 수행할 수 있습니다.

var ua = window.navigator.userAgent;
var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
var webkit = !!ua.match(/WebKit/i);
var iOSSafari = iOS && webkit && !ua.match(/CriOS/i);

업데이트: 매우 오래된 답변이므로 해당 답변을 승인했으므로 삭제할 수 없습니다.더 나은 해결책을 위해서는 아래의 무의식적인 답변을 확인하세요.

---

사용자 에이전트 문자열에서 "iPad" 또는 "iPhone" 하위 문자열을 확인할 수 있어야 합니다.

var userAgent = window.navigator.userAgent;

if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
   // iPad or iPhone
}
else {
   // Anything else
}

모범 사례:

function isMobileSafari() {
    return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
}

모든 답변과 설명을 병합했습니다.여기 결과물이야.

function iOSSafari(userAgent) {
    return /iP(ad|od|hone)/i.test(userAgent) &&
      /WebKit/i.test(userAgent) &&
      !(/(CriOS|FxiOS|OPiOS|mercury)/i.test(userAgent));
}


// Usage:
// if iOSSafari(window.navigator.userAgent) { /* iOS Safari code here */ }

// Testing:
var iPhoneSafari = [
  "Mozilla/5.0 (iPhone; CPU iPhone OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1",
  "Mozilla/5.0 (Apple-iPhone7C2/1202.466; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A5370a Safari/604.1",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1",
  "Mozilla/5.0 (iPhone9,3; U; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1",
  "Mozilla/5.0 (iPhone9,4; U; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1",
];
console.log("All true:", iPhoneSafari.map(iOSSafari));

var iPhoneNotSafari = [
  "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/69.0.3497.105 Mobile/15E148 Safari/605.1",
  "Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/13.2b11866 Mobile/16A366 Safari/605.1.15",
];
console.log("All false:", iPhoneNotSafari.map(iOSSafari));

폴링 코드는 모바일 사파리만 찾을 뿐 다른 것은 찾을 수 없습니다(돌고래 및 기타 작은 브라우저 제외).

  (/(iPad|iPhone|iPod)/gi).test(userAgent) &&
  !(/CriOS/).test(userAgent) &&
  !(/FxiOS/).test(userAgent) &&
  !(/OPiOS/).test(userAgent) &&
  !(/mercury/).test(userAgent)

모든 답변을 보려면 제안된 ReGEx에 대한 몇 가지 팁이 있습니다.

• AppleWebKit데스크톱 Safari와도 일치(모바일뿐만 아니라)
• 전화할 필요가 없는.match두번, 더 그한간정단대규한해번이상에식, 그고더것선다니호합을가벼운리러한▁the▁more다▁lighter니선호▁prefer합▁andge,..test방법.
• 그자리의 g(가 없는 (lobal) regex 플래그는 쓸모가 없습니다.i( 구분 안 함) 할 수
• 캡처할 필요가 없습니다. 문자열을 테스트하는 중입니다.

저는 그냥 이거 쓰고 있어요.true모바일의 경우 Chrome은 괜찮습니다(동일한 동작):

/iPhone|iPad|iPod/i.test(navigator.userAgent)

(나는 단지 그 장치가 iOS 앱의 대상인지 감지하고 싶을 뿐입니다.

이 정규식은 깔끔하고 단순하게 나에게 적합합니다.

const isIOSSafari = !!window.navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);

사실, 모바일 사파리를 탐지하는 데는 큰 도움이 되지 않습니다.모바일 사파리의 사용자 에이전트의 키워드를 사용할 수 있는 브라우저가 꽤 있습니다.기능 탐지를 시도하고 규칙을 계속 업데이트할 수 있습니다.

이것이 오래된 스레드라는 것을 알지만, 저는 여러분과 제 솔루션을 공유하고 싶습니다.

사용자가 데스크톱 사파리에서 탐색할 때 탐지해야 했습니다(2017년 중반에 Apple이 지원하지 않았기 때문).input[type="date"]아직...

그래서 폴백 커스텀 날짜 선택기를 만들었습니다). 그러나 모바일 사파리에서는 해당 입력 유형이 잘 작동하기 때문에 데스크톱의 사파리에만 적용됩니다.그래서 데스크톱 사파리만 탐지하기 위해 이 Regex를 만들었습니다.이미 테스트를 해봤는데 오페라, 크롬, 파이어폭스, 사파리 모바일과 일치하지 않습니다.

당신들 중 일부에게 도움이 되길 바랍니다.

if(userAgent.match(/^(?!.*chrome).(?!.*mobile).(?!.*firefox).(?!.*iPad).(?!.*iPhone).*safari.*$/i)){
  $('input[type="date"]').each(function(){
    $(this).BitmallDatePicker();
  })
}

저는 @unwitting의 대답에 찬성표를 던졌습니다. 그것이 저를 불가피하게 가게 했기 때문입니다.하지만 iOS 웹 뷰에서 SPA를 렌더링할 때 약간의 수정이 필요했습니다.

function is_iOS () {
    /*
        Returns (true/false) whether device agent is iOS Safari
    */
    var ua = navigator.userAgent;
    var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
    var webkitUa = !!ua.match(/WebKit/i);

    return typeof webkitUa !== 'undefined' && iOS && webkitUa && !ua.match(/CriOS/i);
};

가장 큰 차이점은 이름을 바꾼다는 것입니다.webkit로.webkitUa뿌리와의 충돌을 방지하기 위해webkitSPA 및 UIView 간에 메시지 처리기로 사용되는 개체입니다.

저는 이 답을 찾다가 전에 우연히 발견한 것을 기억했습니다.

iOS에서 JavaScript에서 Safari를 탐지하는 가장 신뢰할 수 있는 방법은 다음과 같습니다.

if (window.outerWidth === 0) {
    // Code for Safari on iOS
} 

or 

if (window.outerHeight === 0) {
    // Code for Safari on iOS
} 

어떤 이유에서인지 iOS의 Safari는 창에 대해 0을 반환합니다.외부 높이 속성 및 창.outerWidth 속성입니다.

이것은 모든 버전의 iOS에 있는 모든 iPad와 iPhone을 위한 것입니다.이 속성은 다른 모든 브라우저 및 장치에서 정상적으로 작동합니다.

그들이 이것을 바꿀 의도인지 확실하지 않지만 지금은 잘 작동합니다.

무의식적인 답변을 바탕으로 누군가가 필요로 하는 경우 정규 표현입니다.

/^(?=.*(iPhone|iPad|iPod))(?=.*AppleWebKit)(?!.*(criOS|fxiOS|opiOS|chrome|android)).*/i

수년이 지났지만 애플은 여전히 바닥 고정 위치를 고치지 못하고 있습니다.100vh) 모바일 Safari의 버그입니다.다른 브라우저는 모두 정상적으로 작동합니다.

따라서 Chrome 및 심지어 Brave에 대해서도 "Google, Inc"라고 표시되는 공급업체 속성이 있습니다. 사용자 에이전트가 "Apple Computer Inc."라고 표시되지 않는 한 다른 웹킷 브라우저도 있습니다. 이 경우 Safari"라고 표시됩니다.

Desktop Safari에서 잘못된 긍정을 방지하려면 maxTouchPoints 속성도 필요합니다. maxTouchPoints 속성은 모바일의 경우 5이고 데스크톱의 경우 0입니다.끔찍해요, 알아요.

const isSafari =
  navigator.userAgent.match(/safari/i) &&
  navigator.vendor.match(/apple/i) &&
  navigator.maxTouchPoints;

if (isSafari) 
  $("body").classList.add("mobile-safari");

그런 다음 그것을 사용하여 CSS에서 조정합니다.mobile-safari학급.

function isIOS {
  var ua = window.navigator.userAgent;
  return /(iPad|iPhone|iPod).*WebKit/.test(ua) && !/(CriOS|OPiOS)/.test(ua);
}

var isApple = false;    
if(/iPhone|iPad|iPod/i.test(navigator.userAgent)) {      
  isApple = true;
}

언급URL : https://stackoverflow.com/questions/3007480/determine-if-user-navigated-from-mobile-safari