I am using user-agent to distinguish whether the browser is on mobile or desktop. However, if I change the setting to pc-mode in the Android browser, user-agent's value is changed to "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.74 Safari/537.36" .
To make it clear, I applied navigator.maxTouchPoints > 0 to confirm if it is a mobile environment. but chrome on desktop shows navigator.maxTouchPoints's value is 10. I wonder why it comes out like this. Is there any other way to judge mobile devices?
maxTouchPoints would show a number greater than zero if the desktop or laptop has a touchscreen.
You should test for the features you want to use or not use on mobile. Using the userAgent can get cagey as it can be changed easily and what you witnessed is a common trick used to force desktop mode.
Also note that particularly Chrome is looking to 'reduce' the user-agent string to prevent a sort of fingerprinting. User-Agent Reduction
You can check this answer from a similar question for suggestions: What is the best way to detect a mobile device?