小程序里头textarea在安卓和iOS下的兼容性问题
我最近才发现的一个问题，真令人头秃~~~~
事儿是这样的，我负责编写的页面中有一个textarea输入框，当时没当回事儿，我自己测试的时候用自己手机测试了样式没问题（iPhoneX），结果提交之后测试测了跟我说没有对齐，需要优化，我就蒙了，她用的是安卓机，我一看确实错开了，如下图：
然后就开始漫长的寻找，走了一点点弯路，现在记录一下，以防我下次还忘记.
主要思路是先获取机型是安卓还是iOS（注意一点：在微信开发者工具中看到的是devtools），赋值一个布尔变量，然后根据这个变量给textarea不同的class.
上内容：
js:
data:{detail:false},onLoad: function (options) {var phone = wx.getSystemInfoSync(); //重点 ： 调用方法获取机型if (phone.platform == 'ios') {this.setData({detail: true});} else if (phone.platform == 'android') {this.setData({detail: false});}},
wxss：
.area{width: 100%;height: 300rpx;position: relative;display: flex;align-items: flex-start;}.area>text{width: 45px;padding-top: 10px;}.ios {position: absolute;top: 8rpx;margin-left: -11rpx;right: 55rpx;width: calc(100% - 160rpx);height: 100%;}.ios textarea {position: absolute;width: 100%;height: 100%;font-size: 30rpx;}.android {position: absolute;right: 50rpx;width: calc(100% - 160rpx);height: 100%;}.android textarea {width: 100%;height: 100%;float: left;padding: 22rpx 0 0 0;box-sizing: border-box;font-size: 30rpx;}
wxml：
<view class="area"><text><text class="red">*</text>内容</text><view class="{{detail ? 'ios' : 'android'}}"><textarea placeholder="请描述你的问题，以便我们尽快为您处理" value="{{content}}" maxlength="300" bindinput="bindChange"></textarea></view> </view>
最终效果：
