小程序ios android差异,解决小程序textarea在安卓和ios上padding不一的问题
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不一的问题相关推荐
- 小程序里头textarea在安卓和iOS下的兼容性问题
小程序里头textarea在安卓和iOS下的兼容性问题 我最近才发现的一个问题,真令人头秃~~~~ 事儿是这样的,我负责编写的页面中有一个textarea输入框,当时没当回事儿,我自己测试的时候用自己 ...
- python应用程序无法正常启动0xc0000142_应用程序,教您怎么解决应用程序无法正常启动0xc0000142...
小伙伴们,小编问你们,在我们玩电脑的时候如果出现"应用程序无法正常启动(0xc0000142),请单击确定关闭应用程序"的错误提示,你们会不会被气得跳脚?会吧?是我的话早就被气炸了 ...
- 集60+款小工具于一身,解决一堆问题的神器,务必装上
集60+款小工具于一身,解决一堆问题的神器,务必装上 今天推荐一款电脑必装软件:万彩办公大师,强烈推荐安装上,真的办公必备,绝不吃亏,良心免费. 点击链接下载:下载链接 提取码:572197 「软件概 ...
- win10 android ios,一机多用?Win10可运行安卓和iOS应用
中关村在线消息:2015年4月30日凌晨,微软Build 2015开发者大会如期召开.微软为开发者提供了更加广阔的开发方案,当晚最重要的一个就是Windows 10可以将App应用从Android和i ...
- 0xc0000005 系统应用日志_0xc0000005,小编教你怎么解决应用程序正常初始化0xc0000005失败...
对于怎么解决应用程序正常初始化0xc0000005失败这个问题,小编觉得是需要知道的,因为我们在生活中遇到类似这样的问题几率还是蛮大的.所以小伙伴们要接着往下看哟~接下来小编就来告诉你们怎么解决应用程 ...
- Android应用程序文件结构,Android项目文件及应用程序—目录结构详解
1. src目录:是源代码目录,所有允许用户修改的java文件和用户自己添加的java文件都保存在这个目录中.如建立EditView工程,ADT根据用户在工程向导中的"Create Acti ...
- android做拨号程序代码,Android开发手机拨号程序实现实例源码介绍
Android开发手机拨号程序实现实例源码介绍,在上一篇文章中,我们实现了第一个程序:helloWorld,并成功测试完成.还给大家介绍了Android项目结构和说明.现在写一个手机拨号程序: 首先, ...
- 网易云音乐 ios android 通用,网易云游戏苹果和安卓不通用吗 | 手游网游页游攻略大全...
发布时间:2015-10-29 虚荣国服账号IOS和安卓是通用的吗?IOS和安卓数据是互通的吗?虚荣国服即将上架啦,小伙伴们是否非常的期待呢?那么国服之中IOS和安卓是数据互通的吗?下面就和多游小编一 ...
- msm android机型适配,英雄联盟手游安卓及iOS适配机型汇总 LOL手游适配机型一览
原标题:英雄联盟手游安卓及iOS适配机型汇总 LOL手游适配机型一览 英雄联盟手游马上就要在6月6日正式开测了,很多玩家还不清楚LOL手游的适配机型到底有哪些,下面就来为大家分享一下英雄联盟手游的适配 ...
- android与mysql连接不上去_安卓连接不上mysql怎么办
安卓连接不上mysql的解决办法:首先在Activivty中自定义监听事件:然后在自定义监听事件中开辟子线程:最后将coonection的定义改为"DriverManager.getConn ...
最新文章
- Python的零基础超详细讲解(第八天)-Python的条件判断
- 领扣-191 位1的个数 Number of 1 Bits MD
- android9.0首发机型,安卓9.0正式发布,EMUI开启多款机型同步内部测试
- shell中的变量及运算符
- 深入Java中文编码乱码问题及最优解决方法
- 深入Java单例模式
- 豪鹫闲谈--什么因素影响了我们的工资
- Qt for ios 在 xcode 中编译(便于调试)
- 【计算机类】大学生计算机专业常用工具汇总
- 学习Nutch不错的系列文章
- getBoundingClientRect说明
- leetcode —— 207. 课程表
- 摩托罗拉G7系列发布:G7 Plus还有中国红配色
- 转:应用级集群系统的设计(下)
- 国际电话号码的区号mysql数据表
- 计算机辅助设计cad实训总结,CAD上机实验报告.doc
- 音频格式处理--SOX
- UTON NFT的到来将为摄影师带来全新的未来!
- printf 打印结构体成员函数出错原因分析
- OA办公自动化系统开发方案及源码