关于textarea在uniapp、微信小程序下，ios手机有上内边距问题

今天药忘吃喽~ 2022-12-31 04:21 190阅读 0赞

问题：[https://developers.weixin.qq.com/community/develop/doc/00082669f70908eea2a7c9cfe5b400][https_developers.weixin.qq.com_community_develop_doc_00082669f70908eea2a7c9cfe5b400]  
emmmm，这个问题有些年头了，但是，并没有解决。  
最近项目也用到了textarea，安卓机、模拟器完全ojbk，但是一到ios那，就出问题了（ps：我就不喜欢ios机，所以我不知道这个bug，企图萌（猛）混过关）  
在贴个老哥的**分析**：[https://blog.csdn.net/weixin\_33699914/article/details/88731379][https_blog.csdn.net_weixin_33699914_article_details_88731379]  
后来查找了许多资料，找到一些解决的办法。（链接忘了…）  
就写下其中一种比较简单的方法。  
**思路**：既然textarea设置padding:0;不行，那么就让textarea往上移动(margin-top:-20rpx)。首先要判断该手机是ios还是android。至于为什么是-20rpx，这个就根据实际效果了，查找的时候，有的是-10rpx，有的是-12rpx；  
uniapp获取设备信息（**platform**字段）：[https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync][https_uniapp.dcloud.io_api_system_info_id_getsysteminfosync]  
uniapp插件uView（**os**方法）：[https://uviewui.com/js/fastUse.html\#os][https_uviewui.com_js_fastUse.html_os]  
微信小程序获取设备信息：[https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html][https_developers.weixin.qq.com_miniprogram_dev_api_base_system_system-info_wx.getSystemInfo.html]  
拿到设备的平台名称，那就简单了，直接判断然后改变class

<textarea value="" v-model="value" placeholder="选填，请输入您申请退款的说明" :class="os=='ios' ? 'textareaIos' : '' " />
    <script> export default{ data(){ return{ os:this.$u.os(),//我用的是uView，别问，问就是简单方便懒 } } } </script>
    <style> .textareaIos{ margin-top: -20rpx; } </style>

over，吃饭去。  
**最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！**

[https_developers.weixin.qq.com_community_develop_doc_00082669f70908eea2a7c9cfe5b400]: https://developers.weixin.qq.com/community/develop/doc/00082669f70908eea2a7c9cfe5b400
[https_blog.csdn.net_weixin_33699914_article_details_88731379]: https://blog.csdn.net/weixin_33699914/article/details/88731379
[https_uniapp.dcloud.io_api_system_info_id_getsysteminfosync]: https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync
[https_uviewui.com_js_fastUse.html_os]: https://uviewui.com/js/fastUse.html#os
[https_developers.weixin.qq.com_miniprogram_dev_api_base_system_system-info_wx.getSystemInfo.html]: https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html