Detect Which Application (Web, Mobile or Touch Browser) is Loading Web Page?

If you look at the image, there are shared web pages between the 3 applications, Web, Mobile and Touch Browser. I need to report the web pages uniquely per application. So if web page A is loaded, it will need to load different JS libraries for each type of application. Currently a JS bootstrap loader file handles the logic to load the proper JS libraries but that is a 1-to-1 relationship. I now need a way to determine which application is loading the web page and load the appropriate libraries (DTM libraries but irrelevant). The solution would have to reside in the JS bootstrap loader file logic. I’m looking into using the navigator object to sniff out which type of application is requesting the web page but not sure how feasible that is? Maybe feature detection is another way but not sure how/if this would work with the applications? Any ideas?

You might want to take a look at this article: http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

As far as I'm aware, there's no good/reliable ways to specifically detect touch devices, and even if you could, how would you differentiate between a phone and a HP Spectre laptop, for example?

Sniffing for UserAgents can get you some of the results you want, but it's considered to be a suboptimal solution.

Cloudflare gives you the ability to serve different sub-domains for mobile devices, but I'm not sure what criteria they use.

Screen width is a reliable way of detecting whether your content will fit or not.

You can do this in javascript by detecting screen width and redirecting them, but that would be quite inefficient to load the page only to redirect them, so you may want to look into server-side detection: https://webplatform.github.io/docs/concepts/Detecting_device_and_browser/

Hope that helps somewhat.