zoukankan      html  css  js  c++  java
  • 移动端填坑

    1、0.5px边框或者0.5px高度在安卓手机下不显示问题

    .item-gap {
      position: relative;
      &:after {
        content: '';
        position: absolute;
         200%;
        height: 1px;
        background: #eeeeee;
        top: 0;
        left: 0;
        transform-origin: 0 0;
        transform: scale(0.5, 0.5);
        box-sizing: border-box;
        z-index: 1;
      }
    }
    

    2、display:inline-block不仅左右会有无法测量的间距,上下也会有,会影响文字
    3、直接在图片外面加1px的浅颜色边框时,视觉上图片和边框之间会有一条白线

    把一个带边框的透明层放到图片上,这样当时是一个有留白的图片时候是可以看到边框的,当是一个填充色图片时几乎就看不到边框了

    // html
    <div class="bug-logo">
        <div class="bug-logo-border"></div>
        <img class="buy-logo-img" :src="detailData.logoUrl" alt="">
    </div>
    // css
      .bug-logo {
        position: relative;
         3.75rem;
        height: 3.75rem;
        border-radius: 0.1rem;
        overflow: hidden;
        .buy-logo-img {
           100%;
          height: 100%;
          vertical-align: bottom;
        }
        .bug-logo-border {
          position: absolute;
           100%;
          height: 100%;
          border: 1px solid rgba(0,0,0,0.10);
          border-radius: 0.1rem;
        }
      }
    
    

    4、svg 当使用use方式引入时,不要在symbol标签上加width,height属性,因为此时如果再配合viewBox属性使用变会使这个属性在一些机器上如vivo失效

    5、从input切换到一个从下面出现的浮层时,为了避免浮层被键盘顶上去,让浮层延时500毫秒后弹出

    6、当页面上需要填写的信息过多是,下面的input呼出键盘时在安卓手机上会被键盘挡住并且不可滚动
    解决方案:让这个页面可滚动,并且在input的click事件上延时500毫秒后让这个元素滚动到可视区域。
    注意:只能在click事件上不能在focus事件上,因为用户点击键盘上的收起键盘并不是让input失焦,延时是为了等键盘弹出后再计算可视空间的大小
    7、setInterval 在手机端应用收到后台时会停止计时

  • 相关阅读:
    VB.NET 操作Json 包括嵌套的
    c#和VB混用出现的错误
    System.ArgumentException: 另一个SqlParameterCollection中已包含SqlParameter。
    centos vsftpd 安装配置
    linux centos apache+php+mysql 安装( 用包安装 非yum 安装)
    迟到的一笔 php 5 apache 2.2 webservice 创建与配置
    linux centos apache+php+mysql 安装
    php 不能连接数据库 php error Can't connect to local MySQL server through socket '/tmp/mysql.sock'
    内置过渡动画
    Input 输入框
  • 原文地址:https://www.cnblogs.com/bldxh/p/11014620.html
Copyright © 2011-2022 走看看