CSS缩放不起作用-iPad OS（v13-最新）Safari

Question

我在iPad OS的Safari中发现了一个错误。问题是，当我使用css zoom属性进行缩放时，Safari会采用元素的字体大小，并且会根据缩放级别放大或缩小。

[示例：如果我有一个font-size：100％时为20px并缩放到50％的元素，则safari会将字体大小现在设为40px，将该元素保持为100％，因此破坏了我的布局。这仅在运行iPad OS的设备上发生。 （在所有缩放级别50％，60％，70％等情况下都会发生这种情况）

有人在iPad OS上有任何其他信息可以帮助我解决此问题吗？我已经向苹果报告过，但是距离我进行任何状态更新已有一段时间了。

链接至测试：http://alleetest.s3-website-us-east-1.amazonaws.com/

Answer 1

重要，

对于所有关注或遇到此问题的人，我发现了Safari的错误。问题是，使用css zoom属性放大页面时，Apple无法正确缩放文本。例如，如果我有一个字体大小为20px的元素，并将缩放比例设置为50％而不是缩放为10px，Apple实际上是将字体大小设置为40px，依此类推，分别为60％，70％...

Safari仅在iPad OS 13和更高版本上存在此问题。为了简单地看到此内容，只需在每次缩放更改后使用console.log（）更改任何元素的字体大小，就可以看到字体实际上从20px变为40px。

我的解决方案：

`

function updateText({page, scale}){
    if($(page).length > 0) {
        console.log(scale);
        $(page).css("font-size", "");
        let fontSize = parseInt($(page).css("font-size"), 10) * (scale * scale);
        $(page).css("font-size", fontSize+"px");
        for (let i = 0; i < $(page).children().length; i++) {
            const branch = $(page).children()[i];
            updateText({page: branch, scale});
        }
    }
}

`

这可能不是最有效的解决方案，但是无论缩放比例是多少，请缩放*比例，然后将其乘以需要调整的字体！我希望这个问题能尽快解决！