Android Chrome 上的网站特定页面缩放？

Posted 2023-05-06

【中文标题】Android Chrome 上的网站特定页面缩放？

【英文标题】：Website-specific page zoom on Android Chrome?

【发布时间】：2021-03-20 10:48:45

【问题描述】：

在 ios Safari 上，有一个 Aa 按钮可以调整任何特定网站（包括我们一直在开发的网站）上的文本/页面缩放。

除了设置下的全局文本大小调整器之外，我在 android Chrome 上找不到类似的功能。这会影响所有网站。

如果用户愿意，我们希望用户能够将我们的特定网站缩放 115% 和 125%。

我已经调查过：

html 

   zoom:115%;

或

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

谁能推荐在 Android Chrome 上缩放特定网站的最佳做法？

我可能只是建议 iOS Safari 用户使用 Aa 按钮，但可能希望以编程方式为 Android Chrome 用户设置一些内容——基于我们网站上的“首选项”网页。

【参考方案1】：

您可以将document.body.style.zoom="90%" 与您想要的任何百分比一起使用。您也可以使用document.body.style.transform = scale(2);，这会使缩放看起来更漂亮，但具有更好的浏览器支持。您可以在 transform = scale() 之后使用document.body.style.transform = "translate(0, 0)"; 使页面居中。

【讨论】：

在 Android 设备上这样做没有问题（例如，自动换行、字体大小等）吗？

其实看了文档后，好像可以在android上运行，但我不确定，我也会寻找其他选项。

是的，感谢您更新的答案。我也意识到了这一点。我想知道人们是否在各种 Android 设备上遇到过任何与此相关的问题。

好问题，Mozilla 文档说这两种方法都可以在 android chrome update 18 及更高版本link 上正常工作。文档还说 scale 也适用于 android chrome update 18 及更高版本link

哎呀，我的意思是 Android Chrome 版本 18 只是为了澄清