Background Image too far zoomed in on physical iPad

I cant seem to figure this out. I am using Next.js, typescript, and chakraUi.

• When viewing my application through inspect tools, it works exactly as envisioned.
• When viewing my application through mobile it works as envisioned.
• But when viewing on my physical iPad instead inspect tools, it is all the way zoomed in.
• I could fix this by getting rid of ‘fixed’ in my desktop media query, but I want to keep fixed for desktop
• I have tried many things including a scoping amount of recommendations from chatgpt, but cannot solve this issue.
• Note: I have tried the chakraUI attributes such as base, md, sm, lg, but was not able to get that to work which is why I resorted to classic css styled max and min for media screen.

Is this a chakra specific issue?

< Container 
  maxW="100%"
  id="contact"
  backgroundImage={`url('/imgs/contact_banner.png')`}
  backgroundSize="cover" 
  sx={{
    backgroundAttachment: 'scroll', 
    
    // Media Queries
    '@media screen and (min-width: 390px)': {
      backgroundAttachment: 'scroll',  
    },
    '@media screen and (min-width: 481 and max-width: 768px)': {
      backgroundAttachment: 'scroll',  
      backgroundPosition: 'cover', 
    },
    '@media screen and (min-width: 1024px)': {
      backgroundAttachment: 'fixed',   
      backgroundSize: 'cover',         
      // backgroundPosition: 'center',    
    },
  }}
>