关于多行文本 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( ...
随机推荐
- TFS 签入时,提示“变更集注释策略 中的内部错误……”
提示: 变更集注释策略 中的内部错误.加载 变更集注释策略 策略时出错(策略程序集“Microsoft.TeamFoundation.PowerTools.CheckinPolicies.Change ...
- DozerBeanMapper 配置
applicationContext.xml <bean id="mapper" class="org.dozer.spring.DozerBeanMapperFa ...
- LeetCode 260 Single Number III 数组中除了两个数外,其他的数都出现了两次,找出这两个只出现一次的数
Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...
- POI 读取Excel数据
private List<LeagueGroup> read() throws IOException{ List<LeagueGroup> leagueGroups=new ...
- (转)linux磁盘分区fdisk分区和parted分区
linux磁盘分区fdisk分区和parted分区 原文:http://www.cnblogs.com/jiu0821/p/5503660.html ~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- 熟悉servlet的页面跳转
jspweb里面用到的servlet跳转页面的方法 使用的jar包只有 commons-lang3-3.5.jar 运行时,tomcat会先根据web.xml里面的信息,查找servlet <? ...
- Elasticsearch在后台启动
Elasticsearch在linux下使用命令sh elasticsearch start,按键ctrl+c的时候程序就会stop掉,如何将程序在后台启动呢? 需要使用:./elasticsearc ...
- [Freemarker] 在Java中简单实现对Freemarker的引用
Demo目录结构 ├─src │ ├─main │ │ ├─java │ │ │ └─demo │ │ │ └─freemarker │ │ │ ├─main │ │ │ │ Test.java │ ...
- python之re模块和正则表达式
今天我们来谈谈python中模块的使用,在探讨模块前先来了解一下正则表达式的具体用法. 1.正则表达式 正则表达式就是匹配 字符串内容的一种规则.谈到正则就和字符串相关了,首先我们要知道什么是字符组. ...
- 配置Linux环境
安装mariadb +主从复制https://www.cnblogs.com/pyyu/p/9467289.html 参考博客 redis https://www.cnblogs.com/pyyu/p ...