移动端border-radius绘制圆点不圆

问题

border-radius:50%画出来的圆点，在移动端上有的大，有的小，还有的不圆。

原因

一般情况下，只要你几个圆点用的同一个css，那就肯定不是你代码问。而且你查看ios中居然很完美，当然挺贵的安卓手机中基本上也没问题。造成这种原因的情况好几种：

• 使用了px转rem或者px转vw之类的插件，造成了计算过程中产生误差。
• 使用了rem或者vw之类像素单位，造成了计算过程中产生误差。
• 这个情况最操蛋，画圆宽高是奇数，而且圆点比较小，画出的圆就不规则了。

当然可能还有其他情况，毕竟安卓手机版本太多了。

解决方法

让宽高设为1像素的圆点放大到我们需要的尺寸，代码如下：

span{
    width:1px;
    height:1px;
    border-radius:50%;
    transform:scale(4);
    background:red;
}