モバイル側web 1 px枠線ソリューションについて

以前のプロジェクトはdcloudでwebappを開発して、1つの表示の問題に出会って、今年末になって、時間を割いて分かち合います.
多くのアンドロイド携帯電話も高解像度の画面で、1 pxフレームのボタンやリストが特に太く見えます
ここでは,擬似クラスによるスケールにより問題を解決できる.

html：
<div class="tab">
    <span>    span>
    <span>    span>
    <span>    span>
div>


css：

.tab{
    height: 0.49rem;
    line-height: 0.49rem;
    position: relative;
    background: #ffffff;
    display: -webkit-flex;
    display: flex;          
}   
.tab:after {
    width: 100%;
    content: '';
    display: block;
    height: 1px;
    left: 0;
    background: #e9e9e9;
    position: absolute; 
    bottom: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}

このコードはborder-bottom:1 px solid#e 9 e 9 e 9を表示することができる.外枠選択でcssコードafterのbottm:0をtop:0に変更すればよい
同様、左右の枠線

.tab:after {
    height: 100%;
    content: '';
    display: block;
    width: 1px;
    left: 0;//    left0，   right：0     
    background: #e9e9e9;
    position: absolute; 
    top: 0;
    -webkit-transform: scaleX(.5);
    transform: scaleX(.5);
}

直接ボーダーなら

.tab:after {
    position: absolute;
    content: '';
    display: block;
    height: 200%;
    width: 200%;
    //border-radius: 0.1rem;  //      
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    top: -1px;
    left: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;                 
}

他にも問題を解決する方法があると信じていますが、ここではあまり説明しません.分かち合いたい.