1. navigator.platform 값으로 비교.
해당 값에 접속한 OS 정보가 담겨져 있음(정확히는 브라우저가 컴파일 된 플랫폼 정보가 담겨져 있음)
접속 구분하려는 값을 특정 한 후, 해당 값들이 navigator.platform에 있는지 indexOf 처리함
(아래에서 win16, win32, win64는 bit별 윈도우, mac, macintel 은 맥OS 값)
ex)
function isMobile(){
return "win16|win32|win64|mac|macintel".indexOf(navigator.platform.toLocaleLowerCase()) <0;
}
Using "navigator.platform".
"navigator.platform" is showing about platform which browser is compiled on.
Using indexOf, search platform information on navigator.platform
win16, win32, win64 are Windows. mac, macintel are MacOS.
if that words are in navigator.platform, it mean that user access there using not mobile platform.
2. navigator.userAgent 값으로 비교.
userAgent는 브라우저에서 서버로 전송하는 값으로, 서버에서 user를 특정(식별) 하기 위해 쓰인다.
어플리케이션, 시스템 정보, 플랫폼 등의 정보를 가지고 있으며, 주로 아래와 같은 포맷을 가지고 있다.
아래의 함수는 모바일 플랫폼 정보가 userAgent의 Platform 정보에 포함되어 있는지 찾는 방법이다.
일반적으로 PC 환경에서도 모바일 환경 테스트를 하기 위해 userAgent의 값을 모바일 플랫폼 값으로 변경해서 쓸 경우가 있는데,
이처럼 userAgent 값의 변경되는 환경에서 사용할 경우 이 방법을 쓰는 것이 나아 보인다.
ex)
function isMobile(){
return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
}
userAgent is shwoing "user-agent" header value which the browser sent to server.
Server use "user-agent" header value for identify user.
This values include datas about application, system information, platform, e.t.c.
By checking mobile platform names are included in navigator.userAgent, you can know mobile access or not.
Sometimes, even though PC environment, people change userAgent value from PC to Mobile for testing or e.t.c.
If you want checking that situation, I think, this way is better than navigator.platform.
3. navigator.userAgentData
userAgent의 문제는, 구글에서 조만간 개인정보 보호를 위해 향후 크롬에서 userAgent를 비활성 시킬 것이라 한다.
또한 navigator.platform 값도 고정값으로 바뀐다고 한다.
(아래 링크 참조)
Important issue is that Google will disabled userAgent property on future Chrome version for privacy security.
Also navigator.platform will be changed to fixed vlaue.
(Check below link)
link: https://www.zdnet.com/article/google-to-phase-out-user-agent-strings-in-chrome/
향후 userAgent 대신 client hint를 사용한다고 하며, 이에 따른 개발 방법은 아래 링크를 통해 확인 가능하다.
Instead of userAgent, you have to user client hint at future Chrome.
You can check how to user it below link.
link1: https://web.dev/user-agent-client-hints/
link2: https://d2.naver.com/helloworld/6532276
chrome에서 해당 테스트 기능을 활성화 하여 확인한 결과, 내 맥북 환경에서 platform과 userAgent가 각각 윈도우 정보로 표시됨을 확인할 수 있었다.
After enable chrome Experiments value, I checked userAgent and platform property.
UserAgent and navigator.platform were shown "Windows" platform information even though my laptop is MacOS, Macbook.
이러한 이슈 대비를 위해, 본인은 userAgentData(새로 생성되는 속성)값도 같이 대응하여 아래와 같이 작성하였다.
For this issue, I made my code using userAgentData(new property on future Chrome).
function isMobile(){
if(navigator.userAgentData) return navigator.userAgentData.mobile;
else return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
}
브라우저가 userAgentData를 가지고 있을 경우 해당 값으로 모바일 체크를 하도록 했다(이 값은 navigator.platform처럼 사용자가 수정이 불가한 것 처럼 보인다.)
만약 userAgentData를 아직 가지고 있지 않다면, 기존처럼 userAgentData로 체크하도록 분기 처리 했다.
If Browser has navigator.userAgentData property, this function will check navigator.userAgentData.mobile.
This value show user's platform is mobile or not. (I think user can't edit this value like navigator.platform)
If Browser doesn't have userAgentData yet, this function will check navigator.userAgent.