小程序-弹性布局兼容不同机型的个人处理方法

一般来说，小程序在不同机型的兼容问题，可以用rpx这个单位解决70%的问题

剩下的30%该如何解决？很多时候，布局问题可以用弹性布局解决很多，但有时弹性布局能在苹果上兼容得很好，但在安卓部分机型就会出现问题。如vivo、华为荣耀，等等。

这里，为了能达到想要的效果，可以再利用弹性布局进行“再布局”：

针对对象：span、i等行内元素，尤其是针对文字、图标上

正常情况下，一段文字（不换行）和图标搭配，文字和图标上下居中，左右距背景边缘等距，如下图：

(这是示意图，实际中可能没有边框，也不止一个图标、一段文字)

小程序的代码往往是：    

一般来说，这样的布局在调试工具、iphone上都是没问题的。但是在安卓部分机型上就会出现很奇特的效果，比如：

于是可以针对里面的图标和文字再做一次弹性布局：

    

对content1、content2内再做一次弹性布局，强制让其居中或者达到你想要的效果，具体如何做则实际情况实际对待，相信外层弹性布局都会写了，内层自然也会。

再回到像这种简单情形：

（左右、上下边距相等。）

在没有明确要求限制高度、宽度的情况下，不要擅自设定高度和宽度，很容易在提新需求时出现问题。

灵活使用padding，这个属性在绝大多数机型里都能兼容良好，比弹性布局的兼容更好。当出现比较复杂的布局时，则将弹性布局和padding结合使用，然后再针对真机兼容问题进行逐个击破。

以上，纯粹是前段时间做需求时遇到的问题和自己的解决方法，一家之言可能有误，欢迎指正和交流