移动端H5问题记录

1、iOS-搜索框无法输入
解决方案：给 input框添加 style="-webkit-user-select:auto;"

input{
  /*解决ios不能输入问题*/
  -webkit-user-select: auto;
}

2、iOS-input有默认border-radius

input{
  /*兼容ios*/
  border-radius: 0px;
}

3、iOS-H5页面input输入框focus时页面被上顶

<div style="position:static;" id="app"></div>

4、iOS-背景颜色被APP设置,使用 !important重置

 body {
    background-color: #f5f5f5 !important;
  }

5、手机H5页面自定义点击效果

 body {
      /*去除默认点击效果*/
      -webkit-tap-highlight-color: transparent;
  }
/*使用伪类:active实现点击效果*/
.grid .grid-cell:active {
    background-color: #e1e1e1;
  }

6、部分手机不兼容css3的zoom，导致布局变化，丑
解决方案：使用 transform: scale(.5)替代

/*动画*/
  .loading-gif {
    margin: 0 auto;
    width: 110px;
    height: 110px;
    background-image: url("../../../../static/image/map_loading.png");
    animation: play 2s steps(21) infinite ;
    /*zoom: .5*/
    transform: scale(.5);
  }

7、@2x 图 和 @3x 图 的使用，解决图片不清晰问题

/*@3X倍图*/
@media only screen and ((-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)) {}
/*@2X倍图*/
@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){}

8. 多行文本超出显示省略号

/* 超出n行时显示省略号 */
.hide-text-n {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: n;
  -webkit-box-orient: vertical
}

9.某些Android机圆角失效

.radius {
  background-clip: padding-box
}

10.Scroll-X

html

<div class="scroll-x">
  <div class="scroll-item"></div> * n
</div>

css

.scroll-x {
  display: flex;
  width: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  height: 55px;
  padding: 15px;
}

.scroll-item {
  width: 55px;
  flex-shrink: 0;
  margin-right: 10px;
  background-color: blueviolet;
}

image

https://www.jianshu.com/p/99930259b833