我是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 噢~我有空了会分享做游戏的相干技术。
发表回复