【发布时间】：2020-05-17 16:35:09
【问题描述】：
在 iPhone IOS 13 和 iPadOS 上，Safari 在网址栏左侧有可点击的“AA”。
点击它可以让用户放大或缩小文本和其他元素的大小。
如果我们确定我们的网站在使用 AA 功能后实际上在 iPhone 和 iPad 上看起来更好，达到 115%，我们需要对现有的 CSS 和 HTML 做些什么？
我们尝试了不受支持的 CSS：
zoom:115%;
在 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有关，至少这是当您使用浏览器放大/缩小时桌面浏览器上的值变化（通过在控制台中输入上述内容）功能。不确定如何以编程方式设置此值。奇怪的是，当在 iOS 上使用 Aa 缩放功能并在 Mac 上通过Safari > Develop > iPhone进行检查时，输入window.devicePixelRatio似乎总是返回2。如果设置不正确，这也可能值得研究：developer.mozilla.org/en-US/docs/Mozilla/Mobile/… -
@epsilon42 谢谢。你可以看到上面的编辑。如果您愿意，请输入您的评论作为答案。
-
很高兴知道它让您的思路正确！