How do I connect to metamask from web app on mobile devices?

Question

I have only been able to find a way to use metamask in my page with web3js on desktop

How to I make it work on mobile (iOS/android)

Site is https://tipme.cash

const web3 = new Web3(window.ethereum);
        //const web3 = new Web3(new Web3.providers.HttpProvider(this.provider));
        if (typeof web3 === 'undefined' || !web3.currentProvider?.isMetaMask) {
            console.log('MetaMask is not enabled');
            this.error = 'MetaMask is not enabled';
            await this.render();
            return;
        }

        await window.ethereum.enable();
        await window.ethereum.request({ method: 'eth_requestAccounts' });

        const networkData = [
            {
                //chainId: '0x13881', // chain id in hexidecimal
                chainId: '0x89', // chain id in hexidecimal

                chainName: 'MATIC',

                //rpcUrls: ['https://rpc-mainnet.maticvigil.com/'], // dependent on main vs. testnet
                rpcUrls: ['https://polygon-rpc.com/'], // dependent on main vs. testnet

                nativeCurrency: {
                    name: 'MATIC',

                    symbol: 'MATIC',

                    decimals: 18
                },

                blockExplorerUrls: ['https://polygonscan.com/'] // dependent on main vs. testnet
            }
        ];

Answer 1

One option would be to use MetaMask's mobile browser as Richard suggested.

Another option would be to use WalletConnect. You need to instantiate your web3 with this walletconnect-provider instead of window.ethereum, and then continue as usual. The only other difference would be that listening to events is different - see description in the npm page I linked.