MetaMask connection works on PC but fails on mobile browser (React + AppKit)

[vaxberry-ash]

I’m developing a DApp using React and AppKit. I followed the installation guide from the Reown AppKit documentation to set up my project.

The MetaMask connection works perfectly on the PC browser (Chrome), but it fails on the mobile browser (Chrome).

What additional steps might be needed to make it work on mobile browsers? The documentation I referred to doesn’t seem to cover this issue.

export const WALLET_CONFIG = {
projectId: import.meta.env.VITE_REOWN_PROJECT_ID,
appInfo: {~},
},
};

import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { mainnet, polygon, polygonAmoy } from "@reown/appkit/networks";
import { createAppKit } from "@reown/appkit/react";
import { QueryClient } from "@tanstack/react-query";
import { WALLET_CONFIG } from "./constants";

export function initializeWalletConnection() {
const queryClient = new QueryClient();

const walletAdapter = new WagmiAdapter({
networks: [mainnet, polygon, polygonAmoy],
projectId: WALLET_CONFIG.projectId || "",
ssr: true,
});

createAppKit({
adapters: [walletAdapter],
networks: [mainnet, polygon, polygonAmoy],
projectId: WALLET_CONFIG.projectId || "",
metadata: WALLET_CONFIG.appInfo,
features: {
email: false,
socials: [],
analytics: true,
},
debug: true,
});

return {
queryClient,
walletAdapter,
};
}

export function BlockchainWalletProvider({ children }: WalletProviderProps) {
const { queryClient, walletAdapter } = initializeWalletConnection();

return (

{children}

);
}

[vaxberry-ash]

I applied the existing code to a new project, and I confirmed that MetaMask connects even in a mobile environment. It doesn't seem to be an issue with the code.