How to fix layout of Web3 dAPP on IOS/Android?-CodePudding

I created a dAPP using NextJS, Tailwinds, and Truffle Suites with Solidity. Everything is good to go on all of my phones and laptops from 359px up to 1680px .

However the dAPP layout is busted up on IOS devices. Same with the MetaMask mobile phone browser, though not as bad.

My question is how do I make my dAPP layout correctly on IOS/MetaMask Browser (which I think is just Android?)?

There appears no way to use my dAPP with a mobile phone under my current build using anything except the Metamask browser because I cannot get the window.ethereum object to show up in either the Samsung internet or the mobile version of Google Chrome despite downloading the MetaMask wallet specifically for the browser, not for android. However it always displays the 'Install Metamask' button in my UI except when using the MetaMask browser, but then the site looks busted.

I am sitting at the finish line unable to cross. Please help me to understand what I need to do here. I read up about Capacitor/Cordova but I cannot find any information on if they work with Solidity and I do not want to break something I have spent hundreds of house on building at the very end.

If you have Android/IOS devices and are willing to take a quick peek then you may see the problem I am facing first hand at: my dAPP.

Just to be clear, my dAPP is fully functional on non IOS devices. When using the MetaMask browser, the page is scrunched together causing my layout to be messed up but I already made a media query for 359px that should cover it yet it does not. Everything works though when using the Samsung or google chrome browsers on the mobile devices and you can make a purchase in the MetaMask browser as well. The only problem is the layout.

How do I make my layout work in Android/IOS?

Please help and thank you for your help and time.

-Bodi

Here is my Truffle-Config in case it helps:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    screens: {
      'xxs': '359px',
      'xs': '374px',
      ...defaultTheme.screens,
    },
  
    extend: {
      fontFamily: {
        economica: "Economica, sans-serif",
        playfair: "Playfair Display SC, serif"
      },
      screens: {
        'sm': '400px',
        // 'ms': '539px',
        // 'mx': '767px',
      },

CodePudding user response：