htmlcssnext.jsmobile-browserxiaomi

css not working properly on mobile devices (Mi Browser)

My css is working as expected in browsers like chrome (mobile). But when I try with Mi Browser, (native browser on xiaomi, it doesn't work properly.

I'm using Next.js and this is my head tag:

<Head>
<meta charSet="UTF-8" />
<title>Nutryin</title>
<meta
  name="viewport"
  content="width=device-width; initial-scale=1.0;"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Dosis:wght@400;500&display=swap"
  rel="stylesheet"
/>
</Head>

website: https://nutryn-website.nutryn.vercel.app

screenshot on chrome: enter image description here

screenshot on mi browser: enter image description here

Solution

  • have you checked that specified css functions are supported by mi browser? go to w3schools or anywhere to check if browser and its version support your css functions or not.