Web3js – Cannot Connect Web3 Within Metamask Browser on Mobile

The problem here is likely that you are trying to run your page locally, which is explicitly restricted in MetaMask:

🌐 Http(s) - Web Server Required

Due to browser security restrictions, we can't communicate with dapps running on file://. Please use a local server for development.

You will need to publish your code to a local server to test MetaMask functionality.

In the situation where you do not need the MetaMask user context, you can use the HttpProvider fallback using infura.io:

https://github.com/shawntabrizi/ETH-Balance/blob/master/index.html#L13

window.web3 = new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/<APIKEY>"));

This should allow you to do basic read operations on the Ethereum blockchain without needing to deploy to a local test server.

I needed to set up my own infura project (https://infura.io/) and get infuraId.

UPD:

I've decided to do it without infura. To solve problem with mobile version you will have to navigate your mobile to metamask embedded browser. Only that way you will not need to exit browser to comfirm transaction (and all other operations with your account).

This is how i navigate the phone (i put the following url to a tag href, when user clicks it he will go to my site page in desktop browser (on PC) or my site page in metamask browser (on mobile)):

let url = navigator.userAgentData.mobile ? 'https://metamask.app.link/dapp/YOUR_WEB_SITE_PAGE' : 'YOUR_WEB_SITE_PAGE';

Logic for making transactions:

const Web3Modal = window.Web3Modal.default;
const WalletConnectProvider = window.WalletConnectProvider.default;
const providerOptions = {
    walletconnect: {
        package: WalletConnectProvider,
        options: {
            rpc: {
                56: 'https://bsc-dataseed1.binance.org'
            },
            chainId: 56
        }
    }
};

const detectEthereumProvider = async () => {
    let provider;

    if (window.ethereum) {
        
        provider = window.ethereum;
        await provider.enable();

    } else if (window.web3) {

        provider = window.web3.currentProvider;
        await provider.request({ method: 'eth_requestAccounts' });

    } else {

        const web3Modal = new Web3Modal({
            network: "mainnet",
            cacheProvider: true,
            providerOptions
        });

        provider = await web3Modal.connect();
        await web3Modal.toggleModal();

    }
    return provider;
};

..................

connect: async function () {
            try {

                this.provider = await detectEthereumProvider();

                this.provider.on("accountsChanged", async (accounts) => {
                    await this.fetchAccountData();
                });

                this.provider.on("chainChanged", async (chainId) => {
                    await this.fetchAccountData();
                });

                this.provider.on("networkChanged", async (networkId) => {
                    await this.fetchAccountData();
                });

                await this.fetchAccountData();

                this.connected = true;
            }
            catch (e) {
                this.connected = false;
            }
        },

..................

fetchAccountData: async function () {
            this.web3 = new Web3(this.provider);
            this.accounts = await this.web3.eth.getAccounts();
            this.selectedAccount = this.accounts[0];
        },

..................

const contract = new this.web3.eth.Contract(
                smartContractAbiJson,
                smartContractAddress
            );

contract.defaultAccount = selectedAccount;

let res = await contract.methods.transfer(toAddress, amount).send({ from: selectedAccount });