在移动设备上查看我的网站时，背景图像的缩放比例与设置为手机尺寸的桌面浏览器不同 sveltekit

Question

所以我的 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();

正如我所说，桌面版本适用于每个视图：

但是当我查看手机时，我得到了这个：

我在互联网上四处查看并询问副驾驶是否可以发现任何问题，但它并没有真正理解我的意思，并且不断在几个不正确的建议之间切换。我可以做什么来解决这个问题？

Answer 1

要在 Safari 中使用

transform

，您需要

-webkit-transform

。所以你会得到：

    ...
    transform: scaleX(var(--scaleX)) scaleY(var(--scaleY));
    -webkit-transform: scaleX(var(--scaleX)) scaleY(var(--scaleY));
    ...

另一篇文章有更多信息。 为什么在 Safari 上转换翻译无法正常工作？