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

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

例如：

    <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