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

Question

背景：我的PWA当前在我网页的body元素上使用Zoom CSS属性，允许用户自定义其放大级别以进行显示。无论IOS Safari和MacOSX Safari所运行的版本是什么，我都没有任何问题。

问：对于在iPad OS上运行的iPad，修改zoom属性时，它将无法正确缩放字体，而使字体保持100％，而周围的所有内容均为50％，例如会导致布局中断。有没有人遇到过这个问题或知道这是否是一个webkit问题？

注意：运行iOS 12的iPad不会发生。

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

Answer 1

重要，

对于所有关注或遇到此问题的人，我发现了Safari的错误。问题是，使用css zoom属性放大页面时，Apple无法正确缩放文本。例如，如果我有一个font-size：20px的元素，并将缩放比例设置为50％而不是缩放为10px，Apple实际上是将font-size设置为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});
        }
    }
}

`

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