文本域(textarea)中字体受缩放影响的解决方案

在移动端高清适配中,使用textarea时会遇到字体异常放大的问题。本文介绍了一种解决方案,通过使用text-size-adjust属性,可以有效避免字体放大,保持设定的字体大小不变。仅需在textarea样式中加入-webkit-text-size-adjust:none即可。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

大家在使用移动端高清适配的时候,通常会使用缩放。

例如:

    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5" ,viewport-fit="cover&quot;/">
复制代码

但是!问题来了。

在你使用input框的时候没发现问题,但是用textarea的时候,你会发现,给textarea设置宽度,会导致字体比你正常设置的字体大小要大,这是什么问题导致的呢?

没图没真相:

这个是我设置宽度为100%时候显示的字体大小,此时设置的字体大小为14像素,但是看着明显比14像素要大。

来,我再上传一张图:为什么老是上传我!!

这个是我把宽度去掉显示的字体大小,呼,这回看着正常了,但是没有宽度!!!导致了字体换行,这明显不是我们想要的。

这时候就该使用到了尺寸调整控制 text-size-adjust 属性,该属性目前还在草案阶段。

再上图!!

这个大家明显看到,宽度是100%了,字体大小也是我想要的。

这是如何实现的呢? 只需要在你的textarea的样式里面加上: -webkit-text-size-adjust: none 就OK了。

当然,如果有更好的解决方案欢迎小伙伴们在底下留言。

转载于:https://juejin.im/post/5baadd9df265da0af2137191

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值