解决小程序中textarea ios端样式不兼容的两种方法

Posted 是小橙鸭丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决小程序中textarea ios端样式不兼容的两种方法相关的知识,希望对你有一定的参考价值。

今天遇到在小程序里面textarea会存在一定的兼容性问题,textarea有默认的内边距,在安卓手机和ios手机显示的时候,ios手机的内边距会比安卓手机的内边距大很多,所以会造成样式不兼容

解决的办法:通过wx.getSystemInfoSync()获取手机的机型;然后判断是ios手机还是安卓的手机,根据不同的手机机型的型号不同,编写对应不同的CSS样式即可,如下代码:

let phone = wx.getSystemInfoSync();  //调用方法获取机型
if (phone.platform == 'ios') 
    this.isIos = true
 else if (phone.platform == 'android') 
    this.isIos = false

获取到对应的isIos的布尔值,再进行三元判断即可

第二种方法:

微信小程序文档标明disable-default-padding这个属性可以去除!

 

以上是关于解决小程序中textarea ios端样式不兼容的两种方法的主要内容,如果未能解决你的问题,请参考以下文章

前端常用CSS小技巧

微信小程序input、textarea层级穿透问题

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

【uniapp】兼容刘海屏底部安全区

前端面试题之解决浏览器兼容性的方案

微信小程序中的ios兼容性问题