programing

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

yoursource 2021. 1. 16. 10:51
반응형

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


앱이 있는데 사용자가 이동하는 위치에 따라 사용자를 다른 페이지로 리디렉션하고 싶습니다.

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

iPhone WebApps 를 사용할 수 있었는데 어떻게로드되었는지 감지하는 방법이 있습니까? 홈 화면 vs 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";
}

업데이트 : 이것은 매우 오래된 답변이며 답변이 수락되어 삭제할 수 없습니다. 더 나은 솔루션을 위해 아래 무의식적 인 답변을 확인하십시오 .


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

var userAgent = window.navigator.userAgent;

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

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 AppleWebKit이고 CriOS가 아닙니다"를 사용하면 가장 잘 수행 할 수 있습니다.

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

모범 사례는 다음과 같습니다.

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

떨어지는 코드는 모바일 사파리 만 찾지 만 다른 것은 찾지 못합니다 (돌핀 및 기타 소형 브라우저 제외).

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

모든 답변과 댓글을 병합했습니다. 그리고 이것이 결과입니다.

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



var iOSSafari = /iP(ad|od|hone)/i.test(window.navigator.userAgent) && /WebKit/i.test(window.navigator.userAgent) && !(/(CriOS|FxiOS|OPiOS|mercury)/i.test(window.navigator.userAgent));

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

  • AppleWebKit 데스크톱 Safari 와도 일치 (모바일뿐만 아니라)
  • .match이러한 간단한 정규식을 두 번 이상 호출 할 필요가 없으며 더 가벼운 .test방법을 선호합니다 .
  • g그동안 전역 정규식 플래그 쓸모 i(케이스 둔감)이 유용 할 수있다
  • 캡처 할 필요가 없습니다 (괄호). 문자열 만 테스트하고 있습니다.

나는 true모바일 크롬을 얻는 것이 나에게 괜찮 기 때문에 이것을 사용하고 있습니다 (동일한 행동).

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

(기기가 iOS 앱의 대상인지 감지하고 싶습니다)


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


I upvoted @unwitting 's answer, as it inevitably got me going. However, when rendering my SPA in an iOS Webview, I needed to tweak it a bit.

function is_iOS () {
    /*
        Returns 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 webkit !== 'undefined' && iOS && webkit && !ua.match(/CriOS/i);
};

The main difference being, the renaming of webkit to webkitUa, so as to prevent clashing with the root webkit object used as a message handler between the SPA & UIView.


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

I know this is an old thread, but I'd like to share my solution with you guys.

I needed to detect when an user navigates from Desktop Safari (Because we're in middle 2017, and Apple hasn't give any support for input[type="date"] YET...

So, I made a fallback custom datepicker for it) . But only applies to safari in desktop because that input type works fine in mobile Safari. So, I made this Regex to only detect desktop Safari. I already tested it and it doesn't match with Opera, Chrome, Firefox or Safari Mobile.

Hope it may help some of you guys.

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

I was looking for this answer and I remembered I came across this before.

The most reliable way to detect Safari on iOS in JavaScript is

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

or 

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

For some reason Safari on iOS returns 0 for window.outerHeight property and window.outerWidth property.

This is for all iPads and iPhones on all versions of iOS. Every other browser and device this property works normally.

Not sure if they intend to change this but for now it works well.


this regex works for me, clean and simple

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

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

반응형