关于多行文本 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( ...
随机推荐
- 微信小程序-修改单选框和复选框大小的方法
方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保 ...
- springBoot实现socketio
https://github.com/mrniko/netty-socketio-demo https://github.com/mrniko/netty-socketio
- JQuery的extend扩展方法
jQuery.extend 函数使用详解 JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去 ...
- 全排列函数(next_permutation)
顾名思义,这个函数就是用来求数组的全排列的,至于怎么用,看下面的介绍: 这是一个c++函数,包含在头文件algorithm里面,这个函数可以从当前的数组的大小按照字典序逐个递增的顺序排列 看下面的模板 ...
- java编程如何实现多条2017-08-08 22:10:00.0这样的时间数据,相差多少天?(隔24小时为相差1天,否则为0天)
不多说,直接上干货! 这是yyyy-MM-dd HH:mm:ss.S GetIntervalDays.java package zhouls.bigdata.DataFeatureSelect ...
- Storm概念学习系列之Blot消息处理者
不多说,直接上干货! Bolt消息处理者 认识了消息源Spout和消息的数据存储元组Tuple,接下来了解消息的处理者Bolt.Bolt是接收Spout发出元组Tuple后处理数据的组件,所有的消息处 ...
- js中的onclick事件传参需要注意的问题
如果参数是数值类型可以直接传,如果是字符串类型需要在字符串前后加上双引号,双引号需要转义 如 onclick="test(0)"; 直接传值 参数为数值 onclick=&quo ...
- [PHP]使用日志进行调试
两种方法: 1.利用自定义函数: //写日志,打印字符串function writelog($str){ $open=fopen("log.txt","a+") ...
- Spring cloud Eureka 服务治理(高可用服务中心)
在微服务的架构中,我们考虑发生故障的情况,所以在生产环境中我们需要对服务中各个组件进行高可用部署. Eureka Server 的高可用实际上就是将自己作为服务想其它服务注册中心注册自己,这样就形成了 ...
- 玩转spring ehcache 缓存框架
一.简介 Ehcache是一个用Java实现的使用简单,高速,实现线程安全的缓存管理类库,ehcache提供了用内存,磁盘文件存储,以及分布式存储方式等多种灵活的cache管理方案.同时ehcache ...