关于移动端页面兼容性的问题

现在移动端页面在Android4.3上会有哪些不兼容的问题?我的页面在vivo Xshot(X710L)Android版本4.3这款机型上会出现页面布局怪异,其它手机上都是正常的,有碰到过的这样的问题么?我是用vue-cli写的项目,今天突然跟我说vivo这个机型上布局怪异,我想测试也没地方测试啊,有这种测试工具
图片描述

图片描述

上面是大多数手机的布局,
下面是vivo Xshot(X710L)Android版本4.3这款机型上的问题
以下是html 及css代码

        <div class="list-wrapper">
            <ul class="clearfix">
                    <li class="list-item"  @click="listdetail(item)" v-for="(item,index) in mylist">
                        <img :src="item.thumb_url" alt="">
                        <span class="company-name">{{item.wx_name}}</span>
                        <!-- <span v-show="false">浏览量:{{item.view_int}}</span> -->
                        <span>浏览量:{{item.view_int|judge}}</span>
                        <div class="hongbao" v-show=item.is_fensibao></div>               
                    </li>
                   
           </ul>
        </div>
     .list-item{
        float: left;
        list-style:none;
        text-align: center;
        width:25%;
        margin-bottom: 10px;
        position: relative;
    }
    .list-item img{
        width: 2.0rem;
        height: 2.0rem;
        text-align:center;
        border-radius: 5px;
    }
    .list-item span{
        font-size: 10px;
        display: block;
        color:rgb(148,148,148);
        -webkit-transform:scale(0.84,0.84);    
    }
    .list-item .company-name{
    width: 100%;
    font-size: 10px;
    display: -webkit-box;
    /* autoprefixer: off*/
    -webkit-box-orient:vertical;
    /* autoprefixer: on*/
    -webkit-line-clamp:2;
    height: 30px;
    line-height: 15px;
    color: #727171;
    text-align: center;
    overflow: overlay;
    
    }
                
阅读 5.1k
5 个回答

感觉是css上面的问题。用的是rem布局还是什么的?我觉得lz还是需要再给一点代码比较好。。

问题比较奇怪,,换用display:flex布局呢

有两个问题:
1.上面4个图片叠加的问题是因为图片宽度超出外围box导致的,设定下图片宽度自适应。
2.下面的浮动错位是因为上面没有清除浮动,上面清除下浮动就行了。

可能是编写rem的js代码里面不兼容

看不出,可能是flexible方案有点问题吧

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题