小程序兼容问题

1. iphoneX中特殊处理

iphoneX底部会有一个代替home键的bar条，我们在展示内容的时候需要将底部留出bar条的空间，否则bar条会覆盖内容。

在需要处理的页面添加样式

page {
    padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}

2. Android字体

1.字体

UI设计稿上基本字体都是按照IOS的PingFang字体，但是Android不支持。需要使用默认字体。

2. 字重

Android手机只识别font-weight400，700, 对于设计稿还原出现问题的可以查找一下字号。

3. border-radius

在iphone8+的IOS手机上，如果出现border-radius，容易出现锯齿状凸起

上面出现的场景是：给黄色部分设置了border-radius样式

出现这种情况的原因是：

在iphone8+的手机上，会自动添加border的CSS样式。

解决方案：

.yellow {
    border-radius: 8rpx;
    border: 2rpx solid yellow;
    box-sizing: border-box;
}