zoukankan      html  css  js  c++  java
  • 安卓4.4.4以下手机的兼容性问题

    一 兼容性加前缀问题。

    加前缀这些,如果不清楚,在vue项目中有如下配置,在npm run serve 下写不带前缀的,在F12下再去粘贴自动生成的带前缀的即可。

    postcss: {
    plugins: [
    require('autoprefixer'),
    require('postcss-plugin-px2rem')({
    rootValue: 37.5, // 换算的基数
    selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
    propList: ['*']
    })
    ]
    }

    二移动端看日志。

    <script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js"></script>
    <script>
    var vConsole = new VConsole();
    </script>

    三ios抓包(https也行)

    只需要在ios手机上装charles插件,并允许。

    安卓抓http只需装charles插件,抓https需要安装VirtualXposed

    一 flex布局这些是有顺序的,左右顶齐,均分空隙

    display: flex;
    display: -ms-flexbox;
    display: -webkit-box;
    justify-content: space-between;
    -ms-flex-pack: space-between;
    -webkit-box-pack: justify;

    左右顶齐,均分空隙(简化版)

    display: -webkit-box;
    -webkit-box-pack: justify; //左右顶齐

     上下顶齐,均分空隙

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: justify;

    上下方向居中

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -webkit-justify-content: center;
    -webkit-box-pack: center;

     左右居中

    margin:0 auto;

    或:

    text-align:center;

    或:

    display: -webkit-box;

     -webkit-box-pack: center;

    1 安卓4.4.4以下手机,vh不好使。

    2 块级里放行内,只要text-align都有效。

    justify-content: space-around;在box那版不兼容。所以在安卓4.4.4以下不兼容。它是都均分空隙。代替是50%  33.3333% 用宽度代替。

      例如:<div :class="{'threeP':tblist[0].show,'active':tbactive==index,'twoP':!tblist[0].show}" v-for="(item,index) in tblist" :key="item.title" @click="clickTab(item,index)" v-if="item.show">

    4 要想z-index有效,只需要给一个position:relative就行。Z-index 仅能在定位元素上奏效

    阅微小框框放字

    .model_2 .wrap .books .intro .type {
    display: inline-block;
    float: left;
    background: #fff;
    height: .426667rem;
    line-height: 0.48rem;
    padding: 0 .1rem;
    font-size: .266667rem;
    color: #8BAEB1;
    letter-spacing: 0;
    //margin-bottom: .053333rem;
    position: relative;
    }

    .model_2 .wrap .books .intro .type:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 0.03667rem solid #A3C1C4;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 0.13333rem;
    }

    二 只用到flex的时候,这样写:

    display: flex;
    display: -ms-flexbox;
    display: -webkit-box;

    三 固定定位的时候,要写top,4.4.4以下手机不行,不然到处动

    position: fixed;
    top:0;
    z-index: 1001;

    四 做排行的时候,切换小标签换接口,img不换,所以去掉了v-lazy就好了,做鸿雁注意

    五 在做线条的时候,4.4.4以下手机,2px scale(0.5)会出不来

    六 小框框放字,一般这么写

    .span2{
    display: inline-block;
    //float: right;
    background: #fff;
    height: .426667rem;
    line-height: 0.48rem;
    padding: 0 .1rem;
    font-size: .266667rem;
    color: #8BAEB1;
    letter-spacing: 0;
    //margin-bottom: .053333rem;
    position: relative;
    }
    .span2:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid #A3C1C4;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 10px;
    }

    两行省略...

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

     

  • 相关阅读:
    CodeForces gym Nasta Rabbara lct
    bzoj 4025 二分图 lct
    CodeForces 785E Anton and Permutation
    bzoj 3669 魔法森林
    模板汇总——快读 fread
    bzoj2049 Cave 洞穴勘测 lct
    bzoj 2002 弹飞绵羊 lct裸题
    HDU 6394 Tree 分块 || lct
    HDU 6364 Ringland
    nyoj221_Tree_subsequent_traversal
  • 原文地址:https://www.cnblogs.com/wulinzi/p/9295743.html
Copyright © 2011-2022 走看看