如何解决hexo在ios设备中,代码块字体变大的问题
如果你遇到类似情况
在IOS的设备中代码块字体时而正常,时而放大,多半是因为 -webkit-text-size-adjust
导致的,默认是 auto
导致在一些情况下字体被放大,例如下面
但是在安卓设备中却很正常
我们找到代码块区域的位置的css添加 -webkit-text-size-adjust:none
就能正常了, 如下图
请不要写在body或者范围大的css中,避免出现其他意想不到的问题,尽量只控制在代码块中使用
-webkit-text-size-adjust 是什么
-webkit-text-size-adjust
是一个用于控制移动设备浏览器中文本大小调整行为的 CSS 属性。它可以影响到移动浏览器在缩放页面时如何调整文本大小。
该属性有以下几个可能的取值:
auto
:浏览器根据设备的默认设置自动调整文本大小。这是大多数移动浏览器的默认值。none
:浏览器禁止自动调整文本大小。这意味着无论用户如何缩放页面,文本大小都将保持不变。initial
:将属性设置为默认值(通常是auto
)。percentage
:可以指定一个百分比值,用于指示文本相对于默认大小的调整程度。例如,-webkit-text-size-adjust: 120%;
将文本大小调整为默认大小的 120%。
请注意,-webkit-text-size-adjust
属性是一个非标准的属性,只在 WebKit 内核的浏览器(如 Safari)中得到支持。在其他浏览器中,它可能无效或被忽略。
在使用 -webkit-text-size-adjust
时,需要小心考虑使用场景和用户体验。过度限制或调整文本大小可能会导致页面内容难以阅读或不适应用户的浏览偏好。
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 Sola's Blog
评论