纵有疾风起
人生不言弃

关于多行文本 textarea 在ios 真机上padding相对安卓较大问题

问题:

多行文本组件是带有默认的padding的,然而,小程序的teatarea 在ios和安卓上显示的padding不一样,普遍ios的padding会比安卓的要明显的大。这种情况下我的想法是做兼容,也就是分别处理。

在小程序官方文档中是有方法得知当前使用小程序的机型,即 wx.getSystemInfoSync() 。

官方文档链接是:https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfosync

思路是,先得到当前的机型内容,然后通过设置值来显示页面上的属性,具体代码如下:

 1  <textarea placeholder="输入信息" style="padding:{{detail ? '10rpx;':'20rpx;'}}" /> 2 //根据detail的值分别显示不同的属性值 3  4  5 Page({ 6   data: { 7    detail:false  //默认显示安卓的 8    }, 9     onLoad: function (e) {10        var phone=wx.getSystemInfoSync();  //调用方法获取机型11        var detail;12     if (phone.platform=='ios'){13      detail=true;14     } else if (phone.platform == 'android'){15       detail = false;16     }17   }    18 })        

 

能得到的机型内容具体如下,devtools显示在模拟器,在真机上分别是ios和android:

关于多行文本 textarea 在ios 真机上padding相对安卓较大问题插图

总结:以上内容供学习总结分享,有什么不对的地方或可优化的地方,欢迎各位多多指教。

 

文章转载于:https://www.cnblogs.com/miu-key/p/7251830.html

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 关于多行文本 textarea 在ios 真机上padding相对安卓较大问题

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活