移动端适配的理解和各种方案解析(补充)+浏览器字体大小说明

移动端适配 (47条消息) 移动端适配的理解和各种方案解析(详解)_紫陌~的博客-CSDN博客

注意：

vh/wh

在使用过程中发现 vw/vh 无法控制字体大小的放大缩小

解决方法：

window.onresize = function(){
    var box = document.getElementById("box");
    box.style["z-index"] = 1; //显式的触发repaint
}

z-index可以对应的元素被重绘（repaint）。

延伸一点点关于重绘（repaint）和回流（reflow）的知识：

1. 添加、删除元素(回流+重绘)

2. 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)

3. 移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)，或者移动元素到另外1个父元素中。(重绘+回流)

4. 对style的操作(对不同的属性操作，影响不一样)

5. 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)

让我们看看下面的代码是如何影响回流和重绘的:

var s = document.body.style; s.padding = "2px"; // 回流+重绘

s.border = "1px solid red"; // 再一次 回流+重绘

s.color = "blue"; // 再一次重绘s.backgroundColor = "#ccc"; // 再一次 重绘

s.fontSize = "14px"; // 再一次 回流+重绘

// 添加node，再一次 回流+重绘

既然谈到字体了，就展开说说浏览器字体大小

跑一段代码试一下

    <p style="font-size: 12px;">你好1</p>
    <p style="font-size: 10px;">你好2</p>
    <h2>英文</h2>
    <p style="font-size: 12px;">hello</p>
    <p style="font-size: 10px;">hello</p>

使用不同的浏览器打开

从上面效果我们可以看到chrome，edge浏览器中，12px无论中文还是英文，与8px的字体表现是一致的。（Firefox例外,无默认最小字体，直至0px）

为什么会这样呢？

Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制

原因是：Chrome 团队认为汉字小于12px就会增加识别难度。

• 中文版浏览器

与网页语言无关，取决于用户在Chrome的设置里把哪种语言设置为默认显示语言。我尝试了一下，好像无法修改默认语言。

如何支持更小的字体呢？

1. 我们只需要修改浏览器的设置，如下

但是，我们总不能让用户自己去修改吧？pass!

我们常见的解决方案有以下三种：

zoom
-webkit-transform:scale()
-webkit-text-size-adjust:none

1. zoom

但是，官方不推荐

2. transform:scale()

注意的是，使用scale属性只对可以定义宽高的元素生效，所以，如果是span标签，则需要转换为行内块元素。

可以显示最小的字号，但是不会改变元素占据的空间大小，页面布局也不会发生变化。

3. -webkit-text-size-adjust:none

该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小

需要注意的是，自从chrome 27之后，就取消了对这个属性的支持。同时，该属性只对英文、数字生效，对中文不生效