“IE6” 在 iOS 中复活了 - HelloWorld开发者社区

个人公众号「志语自乐」《“IE6” 在 iOS 中复活了》https://mp.weixin.qq.com/s/fDg9BobyA5jJQBVDezVa7A

没用的知识点

这个标题有点标题党的感觉，不过就我个人感受，iOS 中的 Safari 这次的表现真的让我想到了当年的 IE6/7 的感觉。要说为什么呢，主要是让我想到了 hasLayerout 这个词。很多年没见过这个词，也没有人提到这个词了。在 Poe 中问了一下「在浏览器中有一个叫 hasLayerout 的是什么」这个问题，Ta 的回答是这样的：

在浏览器中，"hasLayout" 是一个特定的概念，它与早期版本的 Internet Explorer（IE）浏览器相关。
在 IE 浏览器中，"hasLayout" 是一个用于描述元素布局和渲染行为的属性。它是一个非标准的属性，只在 IE 浏览器中存在。"hasLayout" 属性影响元素的盒模型、浮动、定位和清除浮动等方面。
当元素具有 "hasLayout" 属性时，它会触发一些特定的布局规则，导致元素的渲染行为与其他元素有所不同。例如，当一个元素具有 "hasLayout" 属性时，它可以包含浮动元素，而不会发生高度塌陷的问题。
在 IE 浏览器中，触发 "hasLayout" 属性的方式有多种，包括以下几种常见的情况：
设置元素的 zoom 属性为非默认值，例如 zoom: 1。
元素具有特定的 CSS 属性，如 position: absolute、float: left、display: inline-block 等。
元素具有特定的 CSS 伪类，如 :before、:after。
需要注意的是，"hasLayout" 属性只在早期版本的 IE 浏览器中存在，对于现代的主流浏览器（如 Chrome、Firefox、Safari），该属性并不适用。开发者应该避免在现代 Web 开发中依赖或使用 "hasLayout" 属性。

在上面提到的触发条件中，有一个非标准的 CSS 属性 zoom。是的，这次一个问题就是因为这个属性触发的。

背景

了解了一点没用的知识点后，再说一下遇到的现象。

手上的一个项目是移动端的，然后需求是可以让用户设置字体大小，并运用到整个项目中。处理方式其实很简单，只要放大就可以了。并不需要去考虑什么 rem 啊之类的各种值计算。

在一个设置页面中修改了缩放后，写入到 storage 中记录用户选择的缩放值。

这个需求是在项目后期中插入，并未在前期的规划中。也就是说，项目所选择的组件库、单位值等方案都已经确定了。

方案选择

提到放大，在移动端中现在最简单的处理方式应该就是：

meta 中修改 viewport 的 initial-scale=1, maximum-scale=1, minimum-scale=1 相关值；
页面整体通过 transform 中的 scale() 去缩放；
通过 zoom 属性去缩放；

正常情况来说，优先考虑使用 scale() 的方式来进行缩放。scale() 是标准属性，且在性能上也优于 zoom，然而这个缩放目前的现状是整体放大了，但是放大了之后，宽度超出了屏幕，无法正常显示。就算是改变了 transform-origin 的话，无非也就是让超出屏幕的部分不同而已。

转而考虑使用 meta 的方式，结果跟 scale() 相似，会超出屏幕。

最后尝试使用 zoom 的方式来放大，给 <body> 下的最外层容器 <div> 增加了一个 zoom: 1.15;，看到效果是整体放大，无论是文字还是其他元素，并且没有超出屏幕之外。符合预期效果！😆