记录一些移动端H5，小程序视觉还原问题及方法

标签：add   更新   记录   icon   取消   方法   弹性布局   程序   之间   

前端，特别是移动端如果对视觉还原要求比较高的时候。功能测试和性能测试完成之后。UI真的是一个像素一个像素的给你抠出来哪里还原不到位

之前项目要求还原度要达到98%以上。所以每到视觉还原的时候真的是挺痛苦的，这里记录一些视觉还原不同机型上的一些显示问题。

• 小程序iOS端1rpx显示2px宽度

这个视觉问题这真的是很痛苦的。我们想到针对iOS端单位1rpx，然后transform：scale(0.5);但是会导致个别安卓机型显示特别细，所以这个方案否决了。

最后使用的是http://www.cnblogs.com/leungUwah/p/8519759.html上一篇博文写的方案，后面完美解决

• 明明设置了对应的font-size大小但是还是高度的还原还是对不上

解决办法：检查一下最外层元素有没有设置font-size:0;取消元素之间的间隙

• 小程序元素高度较小的时候安卓机显示字体偏上问题

解决办法：不要因为总共20px的高就设置line-height:20px;要设置line-height:1;然后其他的高度用padding撑开；这种情况如果对应有前面跟有icon的话icon的display:inline-block;vertical-align:top;

• 数字字体行高与中文不在一个高度上的问题

解决办法：这就江郎才尽了。数字本来就别中文矮难道每个数字都单独包起来吗，这治标不治本。UI在设计的时候工具弄的多好看多好看都是建立在某个较好状态数字下的或者其他显示，前端做出来

之后显示肯定是动态的这还真没办法。

• 小程序icon图片background-image显示rpx单位显示边缘有较细微显示不完整问题

解决办法：有两种1.如果还是用rpx单位，那icon整合成雪碧图的时候对应icon周围留1-2个像素的空白。2.用px单位http://www.cnblogs.com/leungUwah/p/8519759.html还是上一篇博文写的方案。

• 其他

多用弹性布局，这对视觉还原效果较好可以减少后面不少的麻烦。还有一个就是我很少几乎不用float，脱离文档流还要清除浮动，不然对其他的元素有影响，说不定还会有什么意想不到的bug。还有一个就是

拿到视觉或者ue搞的时候心里就该先想清除怎么布局了；当然了你这个要根据你的需求显示来的。

好了，暂时想到的就这么多后面如果后面遇到的话会持续更新。

4月的最后一天了，抽点时间来写写博客，记录一些自己遇到的疑难杂症，有写得不对的地方希望大家多多指正。

记录一些移动端H5，小程序视觉还原问题及方法

标签：add   更新   记录   icon   取消   方法   弹性布局   程序   之间   

原文地址：https://www.cnblogs.com/leungUwah/p/8665637.html