微信小顺序从入坑到放弃之坑八:textarea在苹果手机中的大Bug

初次在这里写点东西,还请列位大佬担待点。

择要:
昨天的placeholder-class只是愿望列位看官注重,而本日的textarea就相对是一个超等大坑!而且假如看官手中没有苹果手机测试的话,这个可就真的是个坑了!为啥?岂非要比及用户向你回响反映你们产物有bug???……
上一篇的《微信小顺序从入坑到放弃之坑七:input组件的占位符placeholder》,没啥大坑,而这篇的textarea可就不一样了!这相对是一个超大的Bug!!!

在上一节的设想稿中,细致地点那块儿就是一个textarea组件。如图:《微信小顺序从入坑到放弃之坑八:textarea在苹果手机中的大Bug》

其他无关的就不说了,我们直接进入正题。

一、textarea在模拟器、安卓和苹果中的结果

为了便于视察textarea组件的尺寸局限,我们给textarea设置一个背景色。如图:《微信小顺序从入坑到放弃之坑八:textarea在苹果手机中的大Bug》
(一个带背景色的textarea组件示例代码一个带背景色的textarea组件示例代码)
然后保留后看下模拟器、安卓手机和苹果手机中的结果吧。如图:《微信小顺序从入坑到放弃之坑八:textarea在苹果手机中的大Bug》
(textarea在模拟器和安卓及苹果手机上的结果textarea在模拟器和安卓及苹果手机上的结果)

看到区分了吗?假如没有,再来张大图。如图:《微信小顺序从入坑到放弃之坑八:textarea在苹果手机中的大Bug》
(textarea在苹果手机上间隔顶部有闲暇textarea在苹果手机上间隔顶部有闲暇)

二、不就是个padding吗?!

关于有前端基本的看官来讲,一眼就晓得这是什么原因。是的,根据一般逻辑,这个闲暇就是由padding引发的。

2.1、wxml代码

<textarea style="background:#666;padding:0" value="加padding就有用了吗?"></textarea>

代码写完了,我们再用苹果手机看下结果。如图:《微信小顺序从入坑到放弃之坑八:textarea在苹果手机中的大Bug》
(微信小顺序里的textarea设置padding为0时在苹果手机中没有见效)
微信小顺序里的textarea设置padding为0时在苹果手机中没有见效能够看到,此时这个padding:0在苹果手机上并没有见效!

奇了怪了,岂非textarea不支撑padding吗?因而,我又将padding的值修改成40px,此时在安卓手机上的结果以下:《微信小顺序从入坑到放弃之坑八:textarea在苹果手机中的大Bug》
(设置padding为40时在安卓手机中有用设置padding为40时在安卓手机中有用)
我们能够看到,此时安卓手机上是有用的,再来看看苹果手机吧,如图:《微信小顺序从入坑到放弃之坑八:textarea在苹果手机中的大Bug》
(设置padding为40时在苹果手机中也有用)
咦,怎样又有结果了?!

那这个苹果手机究竟支撑不支撑微信小顺序里的textarea组件的padding属性呢?要说不支撑吧,修改成40时也有用,要说支撑吧,改成0又无效!这就有点坑爹了!

三、微信小顺序里的textarea确切有bug

为了便于测试,这回我们直接测一组吧。结果如图:《微信小顺序从入坑到放弃之坑八:textarea在苹果手机中的大Bug》
(测试发如今微信小顺序中,苹果手机对padding的值有临界点)

看到了吗?当值小于或即是0时,在苹果手机中压根就没有任何回响反映!虽然一般的网页中padding的值是不能为负的!但此时连0!important都无计可施!!!

四、此坑有什么影响

能够有些看官还不晓得这坑有什么影响,拿我们的设想稿来讲。我们写的页面总得与设想稿一致吧!那些如今题目就来了,这个textarea组件在安卓和苹果上的表现都不一样,要想在两种手机上展示结果一样,必须得对苹果零丁处置惩罚才行!不然,我们在安卓上规划是好的,到了苹果手机上面,就已错位了!所以,这就是个超等大坑!要不是因为艺灵我用二手的iphone 6s测试,这个bug预计还不晓得什么时候才晓得呢!假如是比及用户回响反映才晓得,这但是件何等坑爹的事变!!!

五、微信小顺序中textarea内边距的坑通吃iphone各版本

看官能够会说:“都什么年代了,艺灵你还用个破6s来测试!”

行,为了考证此bug并不是只是iphone 6s才有,因而我又招呼了我的小伙伴们。谈天如图:《微信小顺序从入坑到放弃之坑八:textarea在苹果手机中的大Bug》
(微信小顺序中textarea的内边距bug在iphone各版本上都存在)

这回就问你服不服,iphone X,壕不?X都阵亡了!!!

六、怎样处理?

搞过微信小顺序的看官都晓得,在小顺序内里不像一般网页那样能够随意写js,在这里统统都要受限制!

微信小顺序官方也有对应的文档,文档地点:
developers.weixin.qq.com/miniprogram/dev/api/system/system-info/wx.getSystemInfo.html?search-key=wx.getSystemInfo 。官方的文档一直都如许,要么不给案例,要么就简短的写下。如今的机型那么多,鬼晓得怎样推断啊!因而我又在网上搜刮后找到了现成的推断小顺序是用安卓照样IOS翻开的要领,原文地点:blog.csdn.net/niesiyuan000/article/details/80325988。

趁便补充一句,微信官方供应的推断照旧不周全,最新出来的苹果手机还没有完整支撑!相干的坑能够在官方社区的问答中找到。坑!坑!坑!坑!坑!坑!坑!

    原文作者:艺灵
    原文地址: https://segmentfault.com/a/1190000017086890
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞