小程序ios android差异,解决小程序textarea在安卓和ios上padding不一的问题
1.做小程序表單的時(shí)候上下要對(duì)齊一個(gè)文本域和input輸入框，沒想到小程序的textarea在android和ios上差距這么明顯，如下圖，本來(lái)之前遇到這個(gè)問(wèn)題的時(shí)候，設(shè)置了margin和padding之后就解決了，但是在小程序上發(fā)現(xiàn)設(shè)置padding和margin設(shè)置為0也沒用，還是去不掉android和ios表現(xiàn)不一的問(wèn)題，于是研究了一番還是給收拾好了，下面先上問(wèn)題圖：
android端顯示樣子
ios端顯示樣子
從上面兩圖可以看出來(lái)這個(gè)文本域差別也太大了，這效果要是說(shuō)一樣的話也太牽強(qiáng)了，于是調(diào)整了下margin、padding的，發(fā)現(xiàn)并沒有什么用，而且這個(gè)textarea的間距在ios上大的有點(diǎn)離譜了，即使android和ios不要求一樣，但是單一個(gè)ios上面的間距也是明顯的大，難看，好，下面寫下自己的解決辦法，先上兩張效果圖：
android端效果圖
ios端效果圖
下面寫實(shí)現(xiàn)過(guò)程：
js文件:
Page({
data: {
detail:false,
},
onLoad: function (options) {
var phone = wx.getSystemInfoSync();? //調(diào)用方法獲取機(jī)型
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文件：
行動(dòng)名稱
行動(dòng)介紹
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;
}
至此，實(shí)現(xiàn)想要的效果。
總結(jié)
以上是生活随笔為你收集整理的小程序ios android差异,解决小程序textarea在安卓和ios上padding不一的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： React开发（106）:方法定义 不然
- 下一篇： 分享一款TF/SD卡手机存储卡格式化修复