iOS 13 Safari AA 缩放到底有什么作用?

What exactly does iOS 13 Safari AA zoom do?

在 iPhone IOS 13 和 iPadOS 上,Safari 在网址栏的左侧具有可点击的 "AA"。

点击它允许用户放大或缩小文本和其他元素的大小。

如果我们决定我们的网站在使用 AA 功能后在 iPhones 和 iPads 上实际上看起来更好了 115%,我们需要对现有的 CSS 和 HTML?

我们尝试了不受支持的 CSS:

zoom:115%; 

on body, HTML 和 (body, html) 但直到它达到 120% 时它才做任何事情,即使那样字体大小也保持不变。

iOS AA 功能在技术上究竟做了什么以便我们可以模仿它?我确实在 Medium 上问过某个人是否可以通过编程方式访问该功能,但他说不行。

更新 1:

根据下面的第一条评论,我使用了:

<meta name="viewport" content="initial-scale=1.15, user-scalable=no, maximum-scale=1.15, viewport-fit=cover" />

并且它适用于 iOS iPad Safari。我确实必须删除:

width=device-width

来自那个 Meta,所以页面不是太宽。否则会出现一个水平滚动条,并且一些内容会超出页面的右侧。

Firefox Windows 桌面由于某种原因没有效果。

而且当我将 iPad 旋转到纵向视图时,页面项目实际上看起来比初始比例和最大比例最初设置为 1 时要小。可能小 15%。当我将它旋转回横向时,项目比原始项目大 1.15%(例如,上面的 Meta 标签似乎适用于此)。

FWIW:我认为这与 window.devicePixelRatio 有关,至少这是当您使用浏览器缩放 in/out 功能。

但不确定如何以编程方式设置此值。奇怪的是,当在 iOS 上使用 Aa 缩放功能并在 Mac 上通过 Safari > Develop > iPhone 检查时,输入 window.devicePixelRatio 似乎总是 return 2 .

如果设置不正确,这也可能值得研究:https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag