网页默认缩放功能实现记录（viewport）

问题描述

iPad 最近更新了 iOS 13，浏览器（非Safari）的字体缩放功能失效了。

问题原因

经检查，该浏览器字体缩放功能是通过修改 html 和 body 的样式实现的（-webkit-text-size-adjust: 150%）。更新了 iOS 13 后，该样式不起作用。

解决方法

由于该浏览器可以自定义 JavaScript 扩展，即访问某些域名时可以先执行一段代码，于是我添加了一段 JavaScript 代码，在 DOMContentLoaded 后执行。
原理是修改所有域名网页的 viewport meta。

var scaleRatio = 1.5;
var viewportWidth = window.orientation == 90 || window.orientation == -90 ? Math.max(window.innerHeight, window.innerWidth) : Math.min(window.innerHeight, window.innerWidth);
document.head.querySelector('meta[name="viewport"]').setAttribute('content', 'width=' + viewportWidth / scaleRatio + ',initial-scale=' + scaleRatio);