问题:

多行文本组件是带有默认的padding的,然而,小程序的teatarea 在ios和安卓上显示的padding不一样,普遍ios的padding会比安卓的要明显的大。这种情况下我的想法是做兼容,也就是分别处理。

在小程序官方文档中是有方法得知当前使用小程序的机型,即 wx.getSystemInfoSync() 。

官方文档链接是:https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfosync

思路是,先得到当前的机型内容,然后通过设置值来显示页面上的属性,具体代码如下:

  <textarea placeholder="输入信息" style="padding:{{detail ? '10rpx;':'20rpx;'}}" />
//根据detail的值分别显示不同的属性值 Page({
data: {
detail:false //默认显示安卓的
},
onLoad: function (e) {
var phone=wx.getSystemInfoSync(); //调用方法获取机型
var detail;
if (phone.platform=='ios'){
detail=true;
} else if (phone.platform == 'android'){
detail = false;
}
}
})

能得到的机型内容具体如下,devtools显示在模拟器,在真机上分别是ios和android:

总结:以上内容供学习总结分享,有什么不对的地方或可优化的地方,欢迎各位多多指教。

关于多行文本 textarea 在ios 真机上padding相对安卓较大问题的更多相关文章

  1. iOS 真机上图标不显示

    今天在调试时发现模拟器上图标显示了.但真机上测试时发现图标不显示. 解决办法 57*57  的图标然后命名为: Icon.png 这样显示就正常了. 参考资料:http://www.cnblogs.c ...

  2. html之多行文本textarea 及下拉框select(12)

    1.多行文本 多行文本使用textarea标签,默认值需要写在中间,和input标签不同,name属性用于后台获取数据(request.POST.get(meno)) <body> < ...

  3. bullet, iOS真机编译错误error: identifier or immediate expression expected解决方法

    刚才发现c3dEngine2(http://git.oschina.net/wantnon2/c3dEngine2 或 https://github.com/wantnon2/c3dEngine2)的 ...

  4. 禁止多行文本框textarea拖拽

    禁止多行文本框textarea拖拽: textarea { resize: none; } resize这个是用于元素缩放,它可以取以下几个值: none 默认值 both 允许水平方向及垂直方向缩放 ...

  5. html5 表单 填表 select 下拉 textarea多行文本 output Js计算结果

    <select>     下拉 <select>下有很多属性 name        其实有name就有value了,因为button提交的都是? name=value的格式, ...

  6. 【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏

    在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea ...

  7. sharepoint更新多行文本webparth

    前台 <script> function Copy() { var value = document.getElementById("<%=BodyBox.ClientID ...

  8. ionic项目ios真机部署(不需开发者账号)

    ionic项目ios真机部署(不需开发者账号) 安装ionic和cordova npm install -g ionic npm install -g cordova 创建一个新项目 ionic st ...

  9. Xamarin.iOS真机测试报错

    Xamarin.iOS真机测试报错   错误信息:The MinimumOSVersion inside Info.plist does not include the device version( ...

随机推荐

  1. 小程序组件交互 -- 传入js

    1.父组件(wxml页面)向子组件传递 在子组件中定义需要传入的属性 properties: { count: { type: Number, value: 0, observer:function( ...

  2. 【外部节点】json判断@表示正在处理的当前数组项或对象。过滤器还可用于$引用当前对象之外的属性

    $.store.book[?(@.price < $.expensive)] { "category" : "reference", "auth ...

  3. webpack安装及使用

    npm run dev 第一次使用的时候用u盘将某些软件带过去. 所以要找到U盘 2.9.x的版本[推荐] 安装:npm install -g vue-cli 检测版本 vue -V/--versio ...

  4. jquery $.fn $.fx 的意思以及使用

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面简单为大家介绍下jquery $.fn $.fx到底是怎么一回事 $.fn是指jquery的命名空间,加 ...

  5. js通过行列获取表格中input的值

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  6. 使用 dbutils 的结果集包装类 StringTrimmedResultSet

    1.功能 StringTrimmedResultSet 的功能是去掉结果集中数据的前后空格,这个方法是在取结果的时候处理. 2.使用 一般在新建 QueryRunner 对象的时候使用: QueryR ...

  7. TypeScript 装饰器

    装饰器(Decorators)可用来装饰类,属性,及方法,甚至是函数的参数,以改变和控制这些对象的表现,获得一些功能. 装饰器以 @expression 形式呈现在被装饰对象的前面或者上方,其中 ex ...

  8. C#中动态创建数据库和数据表,很经典【转】

    用ADOX创建access数据库方法很简单,只需要new一个Catalog对象,然后调用它的Create方法就可以了,如下: ADOX.Catalog catalog = new Catalog(); ...

  9. js 限制文本框不能输入单引号

    <input onkeydown="if(event.keyCode==32||event.keyCode==188||event.keyCode==222){return false ...

  10. swift学习笔记7

    不管做什么事,只要敬业点,把该作的做好.不要总找借口. 不要看不起小事,生活本是一件件小事的集合.细节决定成败. 士兵突击里面有句台词:他每做一件小事的时候,都好像抓住了一根救命稻草,到最后你才发现, ...