网页默认缩放功能实现记录(viewport)

2019-10-12
问题描述

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);
原文链接:segmentfault.com

上一篇:javascript 设计模式 --单例模式
下一篇:JS数据类型以及数据类型转换
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部