我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发加微信，交朋友）。转载本文前必须获得作者HullQin的授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。背景在上一篇文章中，我提到了一个web开发中的常见问题：《在微信大字号模式下，网页样式乱了怎么办？》。以上提供了解决方案。用户调整微信字体大小后，可以保证网页的字体大小不变，解决了样式混乱的问题。但这背离了微信“关怀模式”和“大字体模式”的初衷。微信设计这些模式不就是为了帮助中老年人看清网页吗？因此，我想将页面适配为大字体模式。当用户调整字体大小时，网页应正常显示相应的字体大小，不影响用户体验！前置知识：微信如何调整网页字体大小在微信自带的浏览器中，用户设置字体大小后，改变的是网页中的font-size。只是Android和iOS的实现不同，但是效果是一样的。iOS修改微信内置浏览器字体大小后，设置了一个text-size-adjustcss值。你可能会问：这是什么属性？让我们看看MDN是怎么说的：它有3个主要值：auto、none、percentage。如果是auto，在小屏浏览器上，文字的字体大小会自动缩放，保证人们可以正常阅读文字。如果为none，则无论屏幕如何，文本字体大小都不会改变。如果是百分比，则文字字体大小会按照相应的百分比进行缩放。微信内置浏览器是给html正文设置text-size-adjust为百分比。相当于所有元素的font-size样式都乘以这个系数。如果用户选择不同的字号，则设置不同的百分比，标准字号为100%。需要注意的是，它只影响font-size字号，不会改变其他距离属性，如width、padding、margin。Android与Android不同，因为text-size-adjust是一个实验性的CSS属性，基本兼容所有iOS机型，大家可以大胆使用。但是安卓不行，很多安卓浏览器都不支持这个功能。但是，Android中有一个更方便的方法。做过Adndroid开发，对WebView比较了解的同学可能见过这个方法：setTextZoom）。可以直接设置WebView中字体的缩放比例。具体效果和text-size-adjust实现的效果一致，只是改变了font-size字号，其他的width、padding、margin等距离属性没有改变。em和rem大家都知道，em和rem是相对单位，px是绝对单位。em通过父元素字体大小的倍数定义“大小，距离”。rem通过相对根元素的字体大小的倍数定义“大小和距离”。那么在微信浏览器中，如果使用em和rem来定义width、padding等样式，当用户修改字体大小时，这些样式会不会缩放呢？我测试了它，它没有。Android和iOS不会受到影响。因为我的网页通过rem定义了按钮的大小，但是用户修改字体后，按钮没有缩放。但是在手机端设置大字号后：可见微信并没有修改font-size，只是在渲染时将所有文字的font-size乘以一个固定的系数。开发注意事项：谨慎对待固定宽高的容器了解了以上知识点后，我们就来说说开发中的注意事项。为什么字体变大后样式会出错？我们观察一下，几乎所有错误的样式都是由固定宽高的容器造成的：你用CSS固定了容器的宽高，但是里面的文字变大了，超出了容器。解决方案一：固定一个更大的宽度和高度对于这种类型的容器，我们可以在设置最大字体大小后看到文本有多大。如果容器的固定宽度和高度可以容纳最大字体大小，那么用户将大字体大小向上调整后就不会出错。这通常与垂直和水平居中相结合，使样式更美观。方案二：只固定宽度，不固定高度。只要放开高度限制，文字就可以自动换行。当然，你的固定宽度一定要大于最大字号下单个文字的宽度。如果内容是英文，固定宽度比最大字号下最长的字还要宽，至少能容纳一个字。为什么？如果一行中放不下一个词，并且这个词超出了容器，用户就会觉得存在样式错误。方案三：只固定高度，不固定宽度也可以固定高度，宽度由内容决定。当然这需要改变其他相邻元素的布局。可以借助flex来实现。方案四：固定宽高，省略多余内容。当文本太大时，内容将无法完全显示。使用省略号代替不完整的内容也是一个好主意。单行省略：div{width:200px;溢出：隐藏；空白：nowrap；text-overflow:ellipsis;}多行省略（需要修改-webkit-line-clamp为具体行数）：div{width:200px;溢出：隐藏；显示：-webkit-box；-webkit-box-orient：垂直；-webkit-line-clamp:2;}方案五：固定高度，设置最大最小宽度也可以设置最小宽度。当内容过多时，它会拉伸容器。但是如果内容过多，超过了最大宽度限制，还是需要使用方案4中的overflow:hidden来隐藏多余的内容。其他问题：iOS大字体闪烁问题以上问题解决后，还算不完善。在iOS操作系统（iPhone或iPad）下，还是有问题。如果用户之前设置了网页的大字体，在进入任何网页时，都会有明显的闪烁：怎么办？请继续阅读：《微信设置大字号后，iOS加载网页时闪动怎么办？》写在最后。我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发送加微信，交朋友）。转载本文需征得作者授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。
