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不一的问题相关推荐

  1. 小程序里头textarea在安卓和iOS下的兼容性问题

    小程序里头textarea在安卓和iOS下的兼容性问题 我最近才发现的一个问题,真令人头秃~~~~ 事儿是这样的,我负责编写的页面中有一个textarea输入框,当时没当回事儿,我自己测试的时候用自己 ...

  2. python应用程序无法正常启动0xc0000142_应用程序,教您怎么解决应用程序无法正常启动0xc0000142...

    小伙伴们,小编问你们,在我们玩电脑的时候如果出现"应用程序无法正常启动(0xc0000142),请单击确定关闭应用程序"的错误提示,你们会不会被气得跳脚?会吧?是我的话早就被气炸了 ...

  3. 集60+款小工具于一身,解决一堆问题的神器,务必装上

    集60+款小工具于一身,解决一堆问题的神器,务必装上 今天推荐一款电脑必装软件:万彩办公大师,强烈推荐安装上,真的办公必备,绝不吃亏,良心免费. 点击链接下载:下载链接 提取码:572197 「软件概 ...

  4. win10 android ios,一机多用?Win10可运行安卓和iOS应用

    中关村在线消息:2015年4月30日凌晨,微软Build 2015开发者大会如期召开.微软为开发者提供了更加广阔的开发方案,当晚最重要的一个就是Windows 10可以将App应用从Android和i ...

  5. 0xc0000005 系统应用日志_0xc0000005,小编教你怎么解决应用程序正常初始化0xc0000005失败...

    对于怎么解决应用程序正常初始化0xc0000005失败这个问题,小编觉得是需要知道的,因为我们在生活中遇到类似这样的问题几率还是蛮大的.所以小伙伴们要接着往下看哟~接下来小编就来告诉你们怎么解决应用程 ...

  6. Android应用程序文件结构,Android项目文件及应用程序—目录结构详解

    1. src目录:是源代码目录,所有允许用户修改的java文件和用户自己添加的java文件都保存在这个目录中.如建立EditView工程,ADT根据用户在工程向导中的"Create Acti ...

  7. android做拨号程序代码,Android开发手机拨号程序实现实例源码介绍

    Android开发手机拨号程序实现实例源码介绍,在上一篇文章中,我们实现了第一个程序:helloWorld,并成功测试完成.还给大家介绍了Android项目结构和说明.现在写一个手机拨号程序: 首先, ...

  8. 网易云音乐 ios android 通用,网易云游戏苹果和安卓不通用吗 | 手游网游页游攻略大全...

    发布时间:2015-10-29 虚荣国服账号IOS和安卓是通用的吗?IOS和安卓数据是互通的吗?虚荣国服即将上架啦,小伙伴们是否非常的期待呢?那么国服之中IOS和安卓是数据互通的吗?下面就和多游小编一 ...

  9. msm android机型适配,英雄联盟手游安卓及iOS适配机型汇总 LOL手游适配机型一览

    原标题:英雄联盟手游安卓及iOS适配机型汇总 LOL手游适配机型一览 英雄联盟手游马上就要在6月6日正式开测了,很多玩家还不清楚LOL手游的适配机型到底有哪些,下面就来为大家分享一下英雄联盟手游的适配 ...

  10. android与mysql连接不上去_安卓连接不上mysql怎么办

    安卓连接不上mysql的解决办法:首先在Activivty中自定义监听事件:然后在自定义监听事件中开辟子线程:最后将coonection的定义改为"DriverManager.getConn ...

最新文章

  1. Python的零基础超详细讲解(第八天)-Python的条件判断
  2. 领扣-191 位1的个数 Number of 1 Bits MD
  3. android9.0首发机型,安卓9.0正式发布,EMUI开启多款机型同步内部测试
  4. shell中的变量及运算符
  5. 深入Java中文编码乱码问题及最优解决方法
  6. 深入Java单例模式
  7. 豪鹫闲谈--什么因素影响了我们的工资
  8. Qt for ios 在 xcode 中编译(便于调试)
  9. 【计算机类】大学生计算机专业常用工具汇总
  10. 学习Nutch不错的系列文章
  11. getBoundingClientRect说明
  12. leetcode —— 207. 课程表
  13. 摩托罗拉G7系列发布:G7 Plus还有中国红配色
  14. 转:应用级集群系统的设计(下)
  15. 国际电话号码的区号mysql数据表
  16. 计算机辅助设计cad实训总结,CAD上机实验报告.doc
  17. 音频格式处理--SOX
  18. UTON NFT的到来将为摄影师带来全新的未来!
  19. printf 打印结构体成员函数出错原因分析
  20. OA办公自动化系统开发方案及源码

热门文章

  1. 单片机软件开发心得体会
  2. 武汉大学2020年大学生程序设计大赛决赛(重现赛)J (oeis or 卡特兰数+可重集排列数)
  3. 华为IPD体系下的“零缺陷”质量管理
  4. OCR身份证识别免费试用,附带Java代码
  5. Jetson Xavier中安装DIGITS-》Caffee中的错误
  6. Hadoop入门(一)
  7. Java基础编程练习题
  8. C语言常见例题源代码
  9. 日本现代数学发展历程及其启示
  10. 禅道下载与安装教程(完整版)