问题:

多行文本组件是带有默认的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. TFS 签入时,提示“变更集注释策略 中的内部错误……”

    提示: 变更集注释策略 中的内部错误.加载 变更集注释策略 策略时出错(策略程序集“Microsoft.TeamFoundation.PowerTools.CheckinPolicies.Change ...

  2. DozerBeanMapper 配置

    applicationContext.xml <bean id="mapper" class="org.dozer.spring.DozerBeanMapperFa ...

  3. LeetCode 260 Single Number III 数组中除了两个数外,其他的数都出现了两次,找出这两个只出现一次的数

    Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...

  4. POI 读取Excel数据

    private List<LeagueGroup> read() throws IOException{ List<LeagueGroup> leagueGroups=new ...

  5. (转)linux磁盘分区fdisk分区和parted分区

    linux磁盘分区fdisk分区和parted分区 原文:http://www.cnblogs.com/jiu0821/p/5503660.html ~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  6. 熟悉servlet的页面跳转

    jspweb里面用到的servlet跳转页面的方法 使用的jar包只有 commons-lang3-3.5.jar 运行时,tomcat会先根据web.xml里面的信息,查找servlet <? ...

  7. Elasticsearch在后台启动

    Elasticsearch在linux下使用命令sh elasticsearch start,按键ctrl+c的时候程序就会stop掉,如何将程序在后台启动呢? 需要使用:./elasticsearc ...

  8. [Freemarker] 在Java中简单实现对Freemarker的引用

    Demo目录结构 ├─src │ ├─main │ │ ├─java │ │ │ └─demo │ │ │ └─freemarker │ │ │ ├─main │ │ │ │ Test.java │ ...

  9. python之re模块和正则表达式

    今天我们来谈谈python中模块的使用,在探讨模块前先来了解一下正则表达式的具体用法. 1.正则表达式 正则表达式就是匹配 字符串内容的一种规则.谈到正则就和字符串相关了,首先我们要知道什么是字符组. ...

  10. 配置Linux环境

    安装mariadb +主从复制https://www.cnblogs.com/pyyu/p/9467289.html 参考博客 redis https://www.cnblogs.com/pyyu/p ...