华为手机端对H5的rem部分不兼容

Question

//html代码


<div class="wenjuan-info">
                    <div class="wenjuan-info1">
                        <div class="wenjuan-info1-title">
                            <p><span class="red">*</span><span class="juli">1</span></p>
                            <p>请结合自身的真实感受,给此次在 Alipay Lab的体验打个分!</p>
                        </div>
                        <div class="wenjuan-info-ans"><input type="radio" name="#" value="A" onclick="displayshow()"><span>  5分</span></div>
                        <div class="wenjuan-info-ans"><input type="radio" name="#" value="B" onclick="displayshow()"><span>  3分</span></div>
                        <div class="wenjuan-info-ans"><input type="radio" name="#" value="C" onclick="displayshow()"><span>  1分</span></div>
                        <div class="wenjuan-info-ans"><input type="radio" name="#" value="D" onclick="displayInput()"><span>  一言难尽</span></div>
                        <div class="wenjuan-info1-input" id="input1" style="display: none;">
                            <input type="text" name="#" id="" class="wenjuan-info-input">
                        </div>
                    </div>
                </div>




//css代码

.wenjuan-info{
    width: 100%;
    margin-top: 0.2rem;
    -moz-box-shadow: 0px 0px 0.2rem 0px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 0px 0.2rem 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 0.2rem 0px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    overflow: hidden;
    border-radius: 0.08rem;
    -moz-border-radius: 0.08rem;
    -webkit-border-radius: 0.08rem
}
.wenjuan-info .wenjuan-info1{
    width: 5.74rem;
    margin: 0.25rem 0.48rem;
    margin-right: 0.1rem;
}
.wenjuan-info1 .wenjuan-info1-title{
    display: flex;
    flex: row;
    
}
.wenjuan-info1 .wenjuan-info1-title p{
    font-size: 0.28rem;
    padding-bottom: 0.2rem;
    color: #858588;

}

.wenjuan-info1 p .red{
    color: #ff0000;
}
.wenjuan-info1 p .juli{
    padding-right: 0.18rem;
}
.wenjuan-info1 .wenjuan-info-ans{
    margin-top: 0.3rem;
    font-size: 0.24rem;
    padding-left: 0.36rem;
    color: #858588;
}


.wenjuan-info1 .wenjuan-info-ans input{
    zoom: 1;
    vertical-align: text-bottom;
    margin-bottom: 0.05rem;
    padding-right: 0.08rem;
}

 华为手机序号与问题没有对齐，别的手机看都没有问题

Answer 1

参考GPT和自己的思路：

根据您提供的信息，问题可能是由于华为手机的屏幕像素密度不同于其他手机屏幕所导致的。在这种情况下，使用rem作为单位可能会出现问题。为了解决这个问题，建议您使用其他单位，例如vw或者px来修复华为手机端不兼容的问题。您可以根据您的需求选择合适的单位，并通过媒体查询来针对不同的屏幕密度进行适配。此外，您也可以使用flexbox或者grid等布局方式来避免像素精度所带来的问题。