文字域(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了。

當然，如果有更好的解決方案歡迎小夥伴們在底下留言。