關於多行文本 textarea 在ios 真機上padding相對安卓較大問題

問題:html

多行文本組件是帶有默認的padding的,然而,小程序的teatarea 在ios和安卓上顯示的padding不同,廣泛ios的padding會比安卓的要明顯的大。這種狀況下個人想法是作兼容,也就是分別處理。android

在小程序官方文檔中是有方法得知當前使用小程序的機型,即 wx.getSystemInfoSync() 。ios

官方文檔連接是:https://mp.weixin.qq.com/debug/wxadoc/dev/api/systeminfo.html#wxgetsysteminfosync小程序

思路是,先獲得當前的機型內容,而後經過設置值來顯示頁面上的屬性,具體代碼以下:api

 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:學習

總結:以上內容供學習總結分享,有什麼不對的地方或可優化的地方,歡迎各位多多指教。優化

相關文章
相關標籤/搜索