Question

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

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

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

链接到测试：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});
        }
    }
}

`

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

Answer 2

您可以设置CSS属性以禁用此反缩放效果-webkit-text-size-adjust: none。 Chrome / Edge浏览器支持无前缀的text-size-adjust，但Safari支持的前缀为-webkit。

iPadOS 13中引入了此“功能”，这是苹果公司“ Desktop-class Browsing”计划的一部分。桌面类浏览通常是一堆“ interventions”。

干预是指用户代理（浏览器）决定略微偏离标准行为，以提供大大增强的用户体验。由于其性质，必须谨慎而谨慎地进行。

在这种情况下，iPadOS Safari 13+干预了CSS zoom属性。 zoom是非标准的，但包括Safari在内的大多数浏览器已经支持了很多年。 IMO的结果是“半标准化的”，但是浏览器供应商对未正式标准化的CSS属性进行干预变得更加自由。

Safari的zoom干预措施是将font-size除以zoom因子。

例如，如果zoom设置为2，而您的font-size为16px，则所有内容（包括字体）通常会显示为两倍大小，但Safari会将{ {1}}乘2，将其设置为font-size。 8px使所有内容加倍时，它将撤消除法的影响，因此文本将不进行zoom显示。

另一方面，如果将zoom设置为zoom，则除以0.5，即乘以2，将0.5设置为font-size。同样，当放大开始时，文本将显示为{32px未编辑。

您可以通过在iPadOS Safari 13+中查看以下片段来查看此效果。第一部分将显示为未缩放；第二部分将正确缩放。如果您使用Safari开发工具检查“未缩放”元素，则会看到它们的zoom已被划分以抵消缩放效果！

font-size

body {
    display: flex;
}

section.fixed div {
    -webkit-text-size-adjust: none;
}

还有一些方法可以完全禁用Safari的桌面类浏览干预。如果要在iPad应用程序中嵌入WKWebView，则可以设置WKWebpagePreferences.ContentMode = mobile以禁用桌面类浏览。

用户还可以通过单击URL栏中的 Aa 按钮并选择“请求移动网站”来手动禁用桌面类浏览。

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

2 个答案: