Community
개발자 99% 커뮤니티에서 수다 떨어요!
← Go back
iOS, iPad userAgent 문제
실제 기기 iPhone 13 Pro를 사용하고 있어서 navigator.userAgent가 iPhone으로 정상적으로 작동하길래 문제 없겠다 싶었습니다.
근데 시뮬레이터에서 iPhone 14 Pro Max로 지정해놓고 홈페이지에 접속해보니까
iPhone -> Macaintosh: Intel Mac OS 로 변하더라구요, 또한 iPad도 마찬가지로 MAC OS라고 렌더링 되구요,
어떻게 하면 브라우저에서 인식할 수 있을까요?
2 comments
hansan0529 | 2년 전
```js
const environment = navigator.userAgent;
const touch = navigator.maxTouchPoints;
const screenWidth = window.screen.availWidth;
let environmentResult;
switch (true) {
case Boolean(environment.match(/Android/i)):
environmentResult = "Android";
break;
// window
case Boolean(environment.match(/Window/i)) && touch === 0:
environmentResult = "Window Desktop";
break;
// iPhone 375 ~ 744
case Boolean(environment.match(/iPhone/i)) ||
(touch > 1 && screenWidth >= 375 && screenWidth < 744):
environmentResult = "iOS";
break;
// iPad 744 ~ 1024
case Boolean(environment.match(/iPad/i)) ||
(touch > 1 && screenWidth >= 744 && screenWidth environmentResult = "iPad OS";
break;
// Mac 1024 ~
case Boolean(environment.match(/Mac OS/i)) ||
(touch === 0 && screenWidth >= 1024):
environmentResult = "Mac OS";
break;
default:
break;
}
export default environmentResult;
```
제가 필요한 코드는 이정도이고, 나머지는 수정해서 사용하면 될 거 같습니다
const environment = navigator.userAgent;
const touch = navigator.maxTouchPoints;
const screenWidth = window.screen.availWidth;
let environmentResult;
switch (true) {
case Boolean(environment.match(/Android/i)):
environmentResult = "Android";
break;
// window
case Boolean(environment.match(/Window/i)) && touch === 0:
environmentResult = "Window Desktop";
break;
// iPhone 375 ~ 744
case Boolean(environment.match(/iPhone/i)) ||
(touch > 1 && screenWidth >= 375 && screenWidth < 744):
environmentResult = "iOS";
break;
// iPad 744 ~ 1024
case Boolean(environment.match(/iPad/i)) ||
(touch > 1 && screenWidth >= 744 && screenWidth environmentResult = "iPad OS";
break;
// Mac 1024 ~
case Boolean(environment.match(/Mac OS/i)) ||
(touch === 0 && screenWidth >= 1024):
environmentResult = "Mac OS";
break;
default:
break;
}
export default environmentResult;
```
제가 필요한 코드는 이정도이고, 나머지는 수정해서 사용하면 될 거 같습니다
hansan0529 | 2년 전
navigator.maxTouchPoints랑 window.screen.availWidth로 어떻게든 해결했습니다~
