1.做小程序表單的時候上下要對齊一個文本域和input輸入框，沒想到小程序的textarea在android和ios上差距這么明顯，如下圖，本來之前遇到這個問題的時候，設置了margin和padding之后就解決了，但是在小程序上發現設置padding和margin設置為0也沒用，還是去不掉android和ios表現不一的問題，于是研究了一番還是給收拾好了，下面先上問題圖：

android端顯示樣子

ios端顯示樣子

從上面兩圖可以看出來這個文本域差別也太大了，這效果要是說一樣的話也太牽強了，于是調整了下margin、padding的，發現并沒有什么用，而且這個textarea的間距在ios上大的有點離譜了，即使android和ios不要求一樣，但是單一個ios上面的間距也是明顯的大，難看，好，下面寫下自己的解決辦法，先上兩張效果圖：

android端效果圖

ios端效果圖

下面寫實現過程：

js文件:

Page({

data: {

detail:false,

},

onLoad: function (options) {

var phone = wx.getSystemInfoSync();? //調用方法獲取機型

var that = this ;

if (phone.platform == 'ios') {

that.setData({

detail: true

});

} else if (phone.platform == 'android') {

that.setData({

detail: false

});

}

},

onReady: function () {

},

onShow: function () {

},

onHide: function () {

},

onUnload: function () {

},

onPullDownRefresh: function () {

},

onReachBottom: function () {

},

onShareAppMessage: function () {

}

})

wxml文件：

行動名稱

行動介紹

wxss文件：

.xingdongDescript{

background: white;

padding: 0 0 0 30rpx;

box-sizing: border-box;

width: 100%;

height: 285rpx;

}

.xingdongNameBox{

width: 100%;

height: 88rpx;

overflow: hidden;

padding: 0 20rpx 0 0;

box-sizing: border-box;

border-bottom: 1rpx solid #E5E5E5;

}

.xingdongNameBox view{

width: 25%;

height: 88rpx;

line-height: 88rpx;

float: left;

color: #000000;

font-size: 34rpx;

}

.xingdongNameBox input{

width: 75%;

height: 88rpx;

line-height: normal;

float: left;

font-size: 34rpx;

color: #000000;

}

.xingdongjieshaoBox{

width: 100%;

height: 197rpx;

overflow: hidden;

padding: 0 20rpx 0 0;

box-sizing: border-box;

position: relative;

}

.xingdongjieshaoBox .xingdongjieshao{

width: 25%;

height: 88rpx;

line-height: 88rpx;

float: left;

color: #000000;

font-size: 34rpx;

position: absolute;

top: 0;

left: 0

}

.iostextarea{

position: absolute;

left: 24.3%;

top: 1rpx;

margin-left: -11rpx;

width: 73%;

height: 197rpx;

}

.iostextarea textarea{

position: absolute;

width: 100%;

height: 100%;

font-size: 34rpx;

}

.androidtextarea{

position: absolute;

left: 24.3%;

width: 73%;

height: 197rpx;

}

.androidtextarea textarea{

width: 100%;

height: 197rpx;

float: left;

padding: 22rpx 0 0 0;

box-sizing: border-box;

font-size: 34rpx;

}

至此，實現想要的效果。

總結

以上是生活随笔為你收集整理的小程序ios android差异,解决小程序textarea在安卓和ios上padding不一的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。