网页默认缩放功能实现记录(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);

你可能感兴趣的:(css,javascript)