Viewing my site on a mobile scales a background image differently to a desktop browser set to the phone's dimensions sveltekit

So I have a paragraph and an svg graphic (nearly a rectangle but with 'wavy' edges on the top and bottom) in my sveltekit site. I would like the SVG to stretch to fill the width of the screen and completely cover the paragraph's height (without cropping the wavy edges of the image).

I got this working on desktops and in mobile view in the F12 menu on my desktop, but when viewing the site on my actual mobile the scaling is all wrong. I have an iphone XR which is a preset option in my browser's sizing menu so the dimensions should be exactly the same.

This is the CSS for the section. intro-para is the overall container and para-content is the text.

.intro-para {    color: white !important;    padding: 2vw 5vw 2vw 5vw !important;    width: 100vw !important;    max-width: 100% !important;    position: relative;    display: flex;    align-items: center;    justify-content: center;}#introPara::before {    content: '';    position: absolute;    top: 0;    left: 0;    width: 100vw;    height: 100%;    background-image: url('../../static/SVG/Asset 8 pink.svg');    background-size: contain;    background-position: center;    background-repeat: no-repeat;    transform: scaleX(var(--scaleX)) scaleY(var(--scaleY));    z-index: -1;}.para-content {    z-index: 3;    margin: 1vw 0 3vw 0;    text-align: left;    width: 100%;}

And then in the OnMount function I have this JS to find the scaleX and Y variables I used:

    function updateScale() {        const paraContainer = document.getElementById('introPara');        const style = window.getComputedStyle(paraContainer, "::before");        const backgroundImage = style.backgroundImage;        let imageUrl = backgroundImage.slice(5, -2);        let imgHeight = 0;        let imgWidth = 0;        const img = new Image();        img.onload = function () {            imgHeight = img.height;            imgWidth = img.width;            const containerHeight = paraContainer.offsetHeight;            const containerWidth = paraContainer.offsetWidth;            const scaleX = containerWidth / imgWidth;            const scaleY = (containerHeight / imgHeight) / 1.5;            const scale = Math.min(scaleX, scaleY);            //const scaleY = (containerHeight / imgHeight) * 0.5 + (imgHeight / containerHeight);            document.documentElement.style.setProperty('--scaleX', scaleX);            document.documentElement.style.setProperty('--scaleY', scaleY);        };        img.src = imageUrl;    }    window.addEventListener('resize', updateScale);    updateScale();

As I said, the desktop version works in every view:

However when I look on my phone, I get this:

I've looked around on the internet and asked co-pilot if they can spot any issues but it doesn't really get what I mean and keeps switching between a couple of incorrect suggestions. What can I do to fix this?