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

Question

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

示例：如果我有一个 font-size: 20px at 100% 并缩放到 50% 的元素，safari 现在将 font-size 设为 40px，将元素保持在 100%，因此破坏了我的布局。 这只发生在运行 iPad 操作系统的设备上。 （这发生在所有缩放级别 50%、60%、70% 等）

有没有人有关于 iPad 操作系统的任何额外信息可以帮助我解决这个问题？ 我已经向 Apple 报告了，但我已经有一段时间没有收到任何状态更新了。

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

Answer 1

您可以设置一个 CSS 属性来禁用这种反缩放效果， -webkit-text-size-adjust: none 。 Chrome/Edge 浏览器支持不带前缀的text-size-adjust ，但 Safari 支持带-webkit前缀。

这个“功能”是在 iPadOS 13 中引入的，作为 Apple 的“桌面级浏览”计划的一部分。 桌面级浏览大多是一堆“干预” 。

干预是当用户代理 [浏览器] 决定稍微偏离标准化行为以提供大大增强的用户体验时。 由于其性质，必须谨慎行事并极其谨慎地进行。

在这种情况下，iPadOS Safari 13+ 会干预 CSS zoom属性。 zoom是非标准的，但多年来大多数浏览器都支持它，包括 Safari。 结果 IMO 是“半标准化的”，但浏览器供应商觉得可以更自由地干预未正式标准化的 CSS 属性。

Safari 的zoom干预是自动将font-size除以zoom因子。

例如，如果zoom设置为2并且您的font-size为16px ，则所有内容（包括字体）通常都会显示为两倍大小，但 Safari 会将font-size除以 2，将其设置为8px 。 当zoom所有内容时，它将取消分割的效果，因此文本将显示为未zoom 。

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

您可以通过在 iPadOS Safari 13+ 中查看以下代码段来查看此效果。 第一部分将显示为未缩放； 第二部分将被适当放大。 如果您使用 Safari Dev Tools 检查“未缩放”元素，您会看到它们的font-size已被分割以抵消缩放效果！

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

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name='viewport' content='width = device-width, initial-scale = 1.0, maximum-scale = 1.0'> </head> <body> <section> <h1>-webkit-text-size-adjust: auto;</h1> <div style="zoom: 1">zoom 1</div> <div style="zoom: 2">zoom 2</div> <div style="zoom: 3">zoom 3</div> <div style="zoom: 4">zoom 4</div> <div style="zoom: 5">zoom 5</div> <div style="zoom: 0.5">zoom 0.5</div> </section> <section class="fixed"> <h1>-webkit-text-size-adjust: none;</h1> <div style="zoom: 1">zoom 1</div> <div style="zoom: 2">zoom 2</div> <div style="zoom: 3">zoom 3</div> <div style="zoom: 4">zoom 4</div> <div style="zoom: 5">zoom 5</div> <div style="zoom: 0.5">zoom 0.5</div> </section> </body> </html>

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

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

Answer 2

重要的，

对于关注或遇到此问题的任何人，我发现了 Safari 的一个错误。 问题是当使用 css zoom 属性时页面被放大时，Apple 没有正确缩放文本。 例如，如果我有一个 font-size: 20px 的元素并将缩放比例设置为 50% 而不是缩放到 10px Apple 实际上是将 font-size 设置为 40px 等等 60%, 70% ...

Safari 仅在 iPad OS 13 及更新版本上有此问题。 要简单地看到这个，只需 console.log() 每次缩放更改后任何元素的字体大小，您可以看到字体实际从 20px 更改为 40px。

新的更好的解决方案：

function setTransformScale(scaleFactor) {
    if(!scaleFactor) scaleFactor = 1;

    let height = $(window).height()*(1/scaleFactor);
    let width = $(window).width()*(1/scaleFactor);

    $(".body-container").css({
        width: width+"px",
        height: height+"px",
        transform: `scale(${scaleFactor})`
    });
};

我已经从我的站点中完全删除了 CSS Zoom 属性并切换到了 transform: scale() 属性。 为了抵消间距，我在我的 css 文件中添加了“transform-origin: top left”，并在 javascript 中我在调整页面大小时运行了我创建的函数。

$(".body-container") 是 body 标签正下方的 div 元素，导致整个页面的缩放效果。

旧解决方案：

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

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