Ipad에서 userAgent가 Mac으로 나올때

 

iOS 13 이후로 navigator.userAgent를 출력해 보면 `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko)` 같이 출력된다.

기존에 wkWebView 사용하고 있었는데 iOS면 bridge를 통해서 통신을 주고 받아야 하는데 기존 로직들이 동작하지 않는다.

비상이다 비상!!

 

방법1. navigator.maxTouchPoints 속성을 추가해서 체크한다.

웹쪽에서 모바일 체크하는 로직을 변경하는 방법이다.

이방법은 추천하지 않는다.. 나중에 바뀔수도 있고 급하게 적용해야 한다면 웹에서 체크할때 아래처럼 하고 적용해서 체크하고

이후에 방법2 방식으로 변경 하는것도 괜찮아 보인다.

 

AS-IS

const isIOS = navigator.userAgent.match(/iPhone|iPad|iPod/i) === null ? false : true;

TO-BE

navigator.maxTouchPoints != 5 체크 추가

`Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko)`으로 출력되지만 iPad에서는 navigator.maxTouchPoints 가 5로 출력됨으로 그부분을 추가해주는 방식이다. (참조: https://redballs.tistory.com/entry/iOS-13-iPad%EC%9D%98-User-agent-%EC%9D%B4%EC%8A%88?category=511760)

const isIOS = navigator.userAgent.match(/iPhone|iPad|iPod/i) === null && navigator.maxTouchPoints != 5 ? false : true;

 

방법2

이 방법이 제일 베스트 인것 같다!! 방법1로 적용하였더라도 최종버전은 방법2로 변경해야 할것이다!

iOS wkWebView 생성하는 부분에 아래 옵션을 추가한다.

 

iOS wkWeView 초기화

    let wkWebConfig = WKWebViewConfiguration()
    
    ...
    
    if #available(iOS 13.0, *) {
        let pref = WKWebpagePreferences.init()
        pref.preferredContentMode = .mobile
        wkWebConfig.defaultWebpagePreferences = pref
    }

이렇게 추가하게 되면 웹쪽에서 navigator.userAgent를 출력해 보아도 `Mozilla/5.0 (iPad; CPU OS 16_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148` 하게 나옴으로 기존에 체크하는 방식을 바꿀 필요가 없다.

 

기존에 체크하던 로직

const isIOS = navigator.userAgent.match(/iPhone|iPad|iPod/i) === null ? false : true;

 

iOS 소스 변경 전 후

`Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko)`

`Mozilla/5.0 (iPad; CPU OS 16_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148`

 

짝짝짝!