关于多行文本 textarea 在ios 真机上padding相对安卓较大问题
问题:
多行文本组件是带有默认的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相对安卓较大问题的更多相关文章
- iOS 真机上图标不显示
今天在调试时发现模拟器上图标显示了.但真机上测试时发现图标不显示. 解决办法 57*57 的图标然后命名为: Icon.png 这样显示就正常了. 参考资料:http://www.cnblogs.c ...
- html之多行文本textarea 及下拉框select(12)
1.多行文本 多行文本使用textarea标签,默认值需要写在中间,和input标签不同,name属性用于后台获取数据(request.POST.get(meno)) <body> < ...
- bullet, iOS真机编译错误error: identifier or immediate expression expected解决方法
刚才发现c3dEngine2(http://git.oschina.net/wantnon2/c3dEngine2 或 https://github.com/wantnon2/c3dEngine2)的 ...
- 禁止多行文本框textarea拖拽
禁止多行文本框textarea拖拽: textarea { resize: none; } resize这个是用于元素缩放,它可以取以下几个值: none 默认值 both 允许水平方向及垂直方向缩放 ...
- html5 表单 填表 select 下拉 textarea多行文本 output Js计算结果
<select> 下拉 <select>下有很多属性 name 其实有name就有value了,因为button提交的都是? name=value的格式, ...
- 【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏
在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea ...
- sharepoint更新多行文本webparth
前台 <script> function Copy() { var value = document.getElementById("<%=BodyBox.ClientID ...
- ionic项目ios真机部署(不需开发者账号)
ionic项目ios真机部署(不需开发者账号) 安装ionic和cordova npm install -g ionic npm install -g cordova 创建一个新项目 ionic st ...
- Xamarin.iOS真机测试报错
Xamarin.iOS真机测试报错 错误信息:The MinimumOSVersion inside Info.plist does not include the device version( ...
随机推荐
- 小程序组件交互 -- 传入js
1.父组件(wxml页面)向子组件传递 在子组件中定义需要传入的属性 properties: { count: { type: Number, value: 0, observer:function( ...
- 【外部节点】json判断@表示正在处理的当前数组项或对象。过滤器还可用于$引用当前对象之外的属性
$.store.book[?(@.price < $.expensive)] { "category" : "reference", "auth ...
- webpack安装及使用
npm run dev 第一次使用的时候用u盘将某些软件带过去. 所以要找到U盘 2.9.x的版本[推荐] 安装:npm install -g vue-cli 检测版本 vue -V/--versio ...
- jquery $.fn $.fx 的意思以及使用
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面简单为大家介绍下jquery $.fn $.fx到底是怎么一回事 $.fn是指jquery的命名空间,加 ...
- js通过行列获取表格中input的值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- 使用 dbutils 的结果集包装类 StringTrimmedResultSet
1.功能 StringTrimmedResultSet 的功能是去掉结果集中数据的前后空格,这个方法是在取结果的时候处理. 2.使用 一般在新建 QueryRunner 对象的时候使用: QueryR ...
- TypeScript 装饰器
装饰器(Decorators)可用来装饰类,属性,及方法,甚至是函数的参数,以改变和控制这些对象的表现,获得一些功能. 装饰器以 @expression 形式呈现在被装饰对象的前面或者上方,其中 ex ...
- C#中动态创建数据库和数据表,很经典【转】
用ADOX创建access数据库方法很简单,只需要new一个Catalog对象,然后调用它的Create方法就可以了,如下: ADOX.Catalog catalog = new Catalog(); ...
- js 限制文本框不能输入单引号
<input onkeydown="if(event.keyCode==32||event.keyCode==188||event.keyCode==222){return false ...
- swift学习笔记7
不管做什么事,只要敬业点,把该作的做好.不要总找借口. 不要看不起小事,生活本是一件件小事的集合.细节决定成败. 士兵突击里面有句台词:他每做一件小事的时候,都好像抓住了一根救命稻草,到最后你才发现, ...