These are great. But do know that both of the ways have their downsides, though:
Using the first way of detecting the OS by grepping the user agent string, you can be certain that the client is, in fact, using a mobile device, but
accessing the user agent string is kind of a bad habit in production, like you said,
it might not consider phones that use a completely different OS, the new PinePhone for example,
since OSes like Android-x86 (a way to run Android on a PC) are present and are still used, the devices which are actually PCs will be shown as mobiles.
Using the second way is better than the first whilst in production, but is kinda ambiguous, because there are zillions of devices which may or may not adhere to the magic number 768 or whatever you choose to use, and also, if you resize the browser window on a desktop, the size will change, so the code will think it is a mobile.
These are great. But do know that both of the ways have their downsides, though:
Using the first way of detecting the OS by grepping the user agent string, you can be certain that the client is, in fact, using a mobile device, but
accessing the user agent string is kind of a bad habit in production, like you said,
it might not consider phones that use a completely different OS, the new PinePhone for example,
since OSes like Android-x86 (a way to run Android on a PC) are present and are still used, the devices which are actually PCs will be shown as mobiles.
Using the second way is better than the first whilst in production, but is kinda ambiguous, because there are zillions of devices which may or may not adhere to the magic number 768 or whatever you choose to use, and also, if you resize the browser window on a desktop, the size will change, so the code will think it is a mobile.
yes, 2nd way is nicer one and you can use in Production as well.