logo标签列表

CSS缩放在iPad OS（v13-latest）Safari浏览器中无效。

cssipadsafarizooming
6
我发现 Safari 在 iPad OS 上存在一个 bug。问题在于，当我使用 CSS 的 zoom 属性进行缩放时，Safari 会将元素的字体大小取出来，并根据缩放级别进行放大或缩小。
例如：如果我有一个元素，字体大小为 20px，在 100% 缩放下缩放到 50%，Safari 现在会将字体大小变为 40px，保持元素在 100% 的缩放级别，从而破坏我的布局。这只会在运行 iPad OS 的设备上出现（在所有缩放级别 50％、60％、70％ 等都会出现）。
是否有人有关于 iPad OS 的额外信息可以帮助我解决这个问题？我已经向 Apple 报告了此问题，但由于我没有收到任何状态更新已经过了一段时间了。
测试链接： http://alleetest.s3-website-us-east-1.amazonaws.com/
你能否在最新版本中重新检查一下这个问题吗？它还存在吗？ - Rikesh Subedi
2个回答
3
你可以将CSS属性设置为禁用此抗缩放效果，-webkit-text-size-adjust: none。Chrome / Edge浏览器支持未加前缀的text-size-adjust，但Safari使用-webkit前缀支持它。
这个“特性”是在iPadOS 13中作为苹果“桌面级浏览”计划的一部分引入的。桌面级浏览主要是一堆“干预”。

干预是指用户代理[浏览器]决定略微偏离标准行为以提供极大的用户体验。由于其性质，必须谨慎使用。

在这种情况下，iPadOS Safari 13+ 阻止了 CSS zoom 属性的使用。虽然 zoom 是非标准化的，但它已经被大多数浏览器支持多年，包括 Safari。结果我认为是“半标准化”的，但浏览器供应商感觉有些自由地干预未正式标准化的 CSS 属性。
Safari 的 zoom 干预是自动将 font-size 除以 zoom 因子。
例如，如果 zoom 设置为 2，而您的 font-size 是 16px，则一切（包括字体）通常会显示为双倍大小，但 Safari 将把 font-size 除以 2，设置为 8px。当 zoom 放大一切时，它将撤消除法的效果，因此文本将不会缩放。
另一方面，如果将zoom设置为0.5，那么就会除以0.5，即乘以2，将font-size设置为32px。同样地，当缩放启动时，文本将显示未经过缩放的状态。
您可以通过在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按钮并选择“请求移动网站”来手动禁用桌面级浏览。

1

重要提醒：

对于任何关注或遇到此问题的人，我发现Safari存在一个错误。问题在于，当使用css缩放属性进行页面放大时，Apple未能正确地缩放文本。例如，如果我有一个字体大小为20px的元素，并将缩放设置为50%，Apple实际上会将字体大小设置为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缩放属性，并转而使用transform: scale()属性。为了解决间距问题，我在我的CSS文件中添加了"transform-origin: top left"，并在JavaScript中调用我的创建函数来调整页面大小。 $(".body-container")是我的div元素，在body标签下方，导致整个页面出现缩放效果。
旧的解决方案：
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});
        }
    }
}

这可能不是最高效的解决方案，但无论规模如何，我都会将比例乘以字体需要调整的倍数！希望这个问题能够尽快解决！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接