How to launch metamask mobile app by clicking on a button on the website on mobile phone like on opensea?

Question

I implemented a shortcode that connects to metamask browser extension and shows the user account using web3 and reactjs, this code works well when using the desktop browser, but when I try it on mobile browser, metamask mobile version doesn't open due to the non-existence of its extension in the mobile browser, How a web app like opensea opens metamask mobile app using the button on the mobile web browser?

export const connectWallet = async () => {
          if (window.ethereum) {
            try {
              const addressArray = await window.ethereum.request({
                method: "eth_requestAccounts",
              });
              const obj = {
                status: "👆🏽 Write a message in the text-field above.",
                address: addressArray[0],
              };
              return obj;
            } catch (err) {
              return {
                address: "",
                status: "... " + err.message,
              };
            }
          } else {
            return {
              address: "",
              status: (
                <span>
                  <p>
                    {" "}
                    {" "}
                    <a target="_blank" href={`https://metamask.io/download.html`}>
                      You must install Metamask, a virtual Ethereum wallet, in your
                      browser.
                    </a>
                  </p>
                </span>
              ),
            };
          }
        };

Answer 1

your solution

this link is answer https://docs.metamask.io/guide/mobile-best-practices.html#deeplinking

in my code

if (window.site.isMobile) {
                window.location = 'https://metamask.app.link/dapp/yourwebsite';
            }

or auto generate from https://metamask.github.io/metamask-deeplinks/#

window.site.isMobile You will have to develop or find a library yourself.