При просмотре моего сайта на мобильном телефоне фоновое изображение масштабируется иначе, чем в настольном браузере, нас ⇐ CSS

[Anonymous]

Итак, на моем сайте sveltekit есть абзац и изображение в формате SVG (почти прямоугольник, но с волнистыми краями сверху и снизу). Я бы хотел, чтобы SVG растянулся, чтобы заполнить ширину экрана и полностью покрыть высоту абзаца (без обрезки волнистых краев изображения).
У меня это работает на настольных компьютерах и в для просмотра на мобильных устройствах в меню F12 на моем рабочем столе, но при просмотре сайта на моем мобильном телефоне масштабирование неправильное. У меня есть iPhone XR, который является предустановленной опцией в меню размеров моего браузера, поэтому размеры должны быть точно такими же.
Это CSS для раздела. intro-para — это общий контейнер, а para-content — это текст.

Код: Выделить всё

.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%;
}

И затем в функции OnMount у меня есть этот JS для поиска переменных ScaleX и Y, которые я использовал:

Код: Выделить всё

    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();

Как я уже сказал, версия для ПК работает в любом представлении:
[img]https:/ /i.sstatic.net/nSxbjRRP.png[/img]



Однако, когда я смотрю на свой телефон, я получаю следующее:


Я поискал в Интернете и спросил второго пилота, могут ли они обнаружить какие-либо проблемы, но это не так. действительно понимаю, что я имею в виду, и продолжает переключаться между парой неправильных предложений. Что я могу сделать, чтобы это исправить?

Подробнее здесь: https://stackoverflow.com/questions/792 ... -desktop-b