Custom VR Button, that appears only on headsets and not on mobile phones
I combined two checks - Needle's check to see if it's a mobile device (this way, you can exclude desktops), and then a second check that uses user agent info to see if it's one of the most common mobile systems. Result: the button does not appear on mobile phones, but it is visible on Quest and Pico 🙂
P.S: I am using Svelte for 2D UI handling.
import { isMobileDevice, NeedleXRSession } from "@needle-tools/engine";
...
// check if this is a mobile phone
function isMobilePhone() {
return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
...
// show the button, if the device is not a mobile phone and VR is supported
{#if isMobileDevice() && !isMobilePhone() && $haveVR }
<VrButton buttonFunction={() => StartVR()} />
{/if}