iOS 13 Safari AA变焦到底有什么用?

问题描述 投票:0回答:1

在iPhone IOS 13和iPadOS上,Safari在网址栏的左侧可以点击“ AA”。

通过点击它,用户可以放大或缩小文本和其他元素的大小。

如果我们确定使用了AA功能后,我们的网站在iPhone和iPad上的观看效果实际上达到了115%,那么我们需要对现有的CSS和HTML做些什么?

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

zoom:115%; 

在body,HTML和(body,html)上,但是直到120%之前它什么都没做,甚至字体大小都保持不变。

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

UPDATE 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标签似乎可以解决此问题)。

html ios safari ios13
1个回答
0
投票

FWIW:我认为这与window.devicePixelRatio有关,至少这是使用浏览器放大/缩小功能时桌面浏览器(通过在控制台中输入以上内容)的值变化。

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

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

© www.soinside.com 2019 - 2024. All rights reserved.