问题:

多行文本组件是带有默认的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. IOS 关于tableview中cell的长按手势

    说明:虽然是tableview中cell的长按手势  但是手势是添加在tableview上的 UILongPressGestureRecognizer *longpress = [[UILongPre ...

  2. 安装mongodb并配置

    下载网址http://dl.mongodb.org/dl/win32/x86_64 mongodb-win32-x86_64-2008plus-ssl-v3.4-latest.zip 解压d盘命名mo ...

  3. RMAN restore fails with ORA-01180: can not create datafile 1 (文档 ID 1265151.1)

    http://blog.itpub.net/26655292/viewspace-2131269/ ########Q&A issue1:ORA-01180: can not create d ...

  4. 自动生成actionbar 所需图片和style

    http://jgilfelt.github.io/android-actionbarstylegenerator/

  5. Murano package

    Murano have 2 package types: HOT package with Heat template inside and MuranoPL package with MuranoP ...

  6. Python 装饰器的形成过程

    装饰器  定义:本质是函数,(装饰其他函数),即为其他函数添加附加功能.  原则: 1.不能修改被装饰的函数的源代码:            2.不能修改被装饰的函数的调用方式. 实现装饰器知识储备: ...

  7. php版给UEditor的图片在线管理栏目增加图片删除功能

    1.找到uedior/dialogs/image/image.js文件,Add为修改部分的代码: /** * tab点击处理事件 * @param tabHeads * @param tabBodys ...

  8. serv-U 7以上版本pasv端口的设置及中文乱码问题

    利用serv-u架设ftp服务器已经是再常见不过了事情了,近日一朋友为图新鲜,弄了个7.4版本的新玩意儿,结果架设上去后,仅开了21端口,用LeapFtp在port模式下连接没问题,但是另一常见的cu ...

  9. mac-httpd

    mac 的httpd mac 自带了apache2, 但是不推荐使用, 因为它的目录在/Library/WebServer/Documents/下 使用brew install apache-http ...

  10. selenium常用方法,简版介绍

    WebElement 接口共计16个------------接口 代表一个HTML元素.通常,所有与页面交互有关的有趣操作都将通过此界面执行. void clear() void click() We ...