我是HullQin，公众号线下团聚游戏的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者HullQin受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。
背景
之前的文章，我提到网页开发的一个常见问题：《在微信大字号模式下，网页款式乱了怎么办？》。上文中提供了一种解决方案，在用户调整微信字体大小后，能够保障网页字体大小不变，解决了款式错乱的问题。
然而这背离了微信「关心模式」和「大字号模式」的初衷。微信设计这些模式，不就是为了帮忙中老年人们看清网页吗？
因而，我心愿让网页适配大字号模式。当用户调整字号时， 网页都应该失常展现对应字号，并且不影响用户体验！
前提常识：微信如何调整网页字体大小
在微信内置浏览器中，用户设置字体大小后，扭转的正是网页中的font-size大小。
只是安卓和iOS实现形式有差别，然而成果雷同。
iOS
在批改了微信内置浏览器字号后，它设置了一个text-size-adjust的css值。
你可能问：这是什么属性？让咱们看下MDN怎么说：
它次要有3种值：auto、none、百分数。
- 如果是
auto，在小屏幕浏览器上，会主动缩放文本字号，保障人能够失常浏览文字。 - 如果是
none，就无论什么屏幕，都不扭转文本字号。 - 如果是百分数，文本字号就依照对应百分数缩放。
微信内置浏览器就是给html的body设置了text-size-adjust为百分数。相当于所有元素的font-size款式都乘以了这个系数。如果用户抉择不同的字号，就设置不同的百分比，规范字号为100%。
须要留神的是，它只影响font-size字号大小，不改width、padding、margin等其它间隔属性。
安卓
而安卓不一样，因为text-size-adjust是个试验中的CSS属性，iOS各个机型根本都做了兼容，能够大胆应用。但安卓不行，很多安卓的浏览器并不反对该个性。
不过在安卓有个更不便的做法，做过Adndroid开发且对WebView比拟理解的同学可能见过这个办法：setTextZoom)。
它能够间接设置WebView中，字体的缩放百分比。具体成果与text-size-adjust达到的成果统一，只改font-size字号大小，不改width、padding、margin等其它间隔属性。
对于em和rem
家喻户晓，em和rem是绝对单位，px是相对单位。
em是通过绝对父元素font-size的倍数来定义「尺寸、间隔」。rem是通过绝对根元素font-size的倍数来定义「尺寸、间隔」。
那么微信浏览器中，如果应用em和rem定义width、padding等款式，当用户批改字号后，这些款式会被缩放吗？
我测试了，并不会。安卓、iOS都不会受影响。
因为我的网页，就是通过rem定义了按钮的尺寸，然而用户批改字体后，按钮没有缩放。
然而在手机上设置大字号后：
可见，微信并没有批改font-size，只是渲染时，针对所有文本的font-size乘了个固定系数。
开发须知：审慎看待固定宽度、高度的容器
理解了上述知识点，咱们就要聊一下开发时的注意事项了。
为什么字体变大后，款式会出错？
咱们察看一下，简直所有出错的款式都是固定宽、高的容器导致：你用CSS固定了容器的width和height，然而外面的文本变大了，都超出容器了。
解决方案一：固定更大的宽度、高度
针对这类容器，咱们能够看看设置最大字号后，文字有多大，如果容器固定的宽度高度可能包容最大字号，那么用户调整大字号后就不会出错了。
这通常配合垂直程度居中，使得款式更好看。
解决方案二：只固定宽度，不固定高度
只有你放开高度的限度，那么文字就能够主动换行了。
当然，你固定的宽度肯定要比最大字号时单个文本的宽度大。如果内容有英文时，固定的宽度要比最大字号时最长的单词宽，至多容得下一个单词。
为什么呢？如果你一行连一个字都放不下，那个字超出了容器，用户看起来就是有款式bug。
解决方案三：只固定高度，不固定宽度
你也能够固定高度，宽度由内容决定。当然这须要扭转其它相邻元素的布局。能够借助flex实现。
解决方案四：固定宽度、高度，但省略多余内容
当文字太大时，内容展现不全，应用省略号代替展现不全的内容，也是个好主见。
单行省略：
div {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}多行省略（需批改-webkit-line-clamp为具体行数）：
div {
width: 200px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}解决方案五：固定高度，设置最大、小宽度
你也能够设置最小宽度。当内容过多时，会撑开容器。然而如果内容太多了，超出了最大宽度限度，仍然须要借助计划四的overflow: hidden来暗藏超出内容。
其它问题：iOS大字号闪动问题
解决完上述问题，并不完满。在iOS操作系统下（iPhone或iPad），依然有个问题。
如果用户之前设置了网页的大字号，进入任意网页时，就有个显著的闪动：
怎么办呢？请持续浏览：《微信设置大字号后，iOS加载网页时闪动怎么办？》
写在最初
我是HullQin，公众号线下团聚游戏的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者HullQin受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。
发表回复