Skip to content

Latest commit

 

History

History
119 lines (97 loc) · 3.71 KB

m-css.md

File metadata and controls

119 lines (97 loc) · 3.71 KB

那些移动端css坑

-webkit-overflow-scrolling

  在ios上-webkit-overflow-scrolling:touch模拟原生的滚动效果，当你看到这个属性以为就随便用时，你会发现可能看不到满意的效果，解决办法

element {
  -webkit-overflow-scrolling:touch
}
element > * {
    -webkit-transform: translateZ(0px);
}

不是flex是-webkit-box

 基于盒模型，依赖display，position，float属性实现布局时有很多布局很难实现，比如垂直居中。依赖flex的弹性布局将会是一个很好的解决方案，flex在ios上支持已经很好了，但是像uc浏览器这种兼容性是很大的问题，所以请用-webkit-box

@mixin flex {
  display: flex;
  display: -webkit-box;
}

@mixin flex-direction-row {
  flex-direction: row;
  -webkit-flex-direction: horizontal;
}


@mixin justify-content-center {
  justify-content: center;
  -webkit-box-pack: center;
}

//两端对齐
@mixin justify {
  justify-content: space-between;
  -webkit-box-pack: justify;
}

@mixin align-items-center {
  align-items: center;
  -webkit-box-align: center;
}

@mixin flex-number($val) {
  flex: $val;
  -webkit-box-flex: $val;
}

pointer-events

  • pointer-events:auto|none，是一个css3属性，auto和width:auto一样，当值为none时，表现为和鼠标事件说拜拜，这里我们可以实现按钮的禁用和移动端禁止图片长按弹出框，没错，就是长按图片弹出框让你选是否保存还是取消。
//禁止图片长按弹框
img {
  pointer-events: none;
}
  • 性能优化，移动端下拉或者上拉滚动时候，为了滚动更丝滑，可以在body上加上css pointer-events: none;，取消touch事件的捕获，提高性能。
  • 我们都知道获取元素可以通过选择器，但是有的时候，你并不知道选择器，比如
<div class="container">
  <div class="item">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
  <div class="item">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
  <div class="item">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</div>

拖着一个元素进入container元素，此时需要获取拖到了某个item上时，我们知道的唯一的信息就是此时触点的坐标，此时也许你想到可以通过elementFromPoint获取元素，但是你会发现elementFromPoint每次获取都是该坐标点下z-index最大的元素，那么还不是你拖着的元素嘛，手q群中对我的应用进行拖拽排序就遇到这样的问题。此时你可能想到设置元素的pointer-events:none解决。

  function matches(el, selector) {
    if(el) {
      selector = selector.split('.');
      var tag = selector.shift().toUpperCase(),
          re = new RegExp('\\s(' + selector.join('|') + ')(?=\\s)', 'g');
      return (
        (tag === '' || el.nodeName.toUpperCase() == tag) &&
        (!selector.length || ((' ' + el.className + ' ').match(re) || []).length == selector.length)
      );
    }
    return false;
 }

  function getElementByPoint(selector, vx, vy) {
    var ele = document.elementFromPoint(vx, vy);
    if(matches(ele, selector) || ele == document.body) {
      return ele;
    }
    ele.style.pointerEvents = 'none';
    var e = getElementByPoint(selector, vx, vy);
    ele.style.pointerEvents = 'auto';
    return e;
  }

高清屏下的border-width:0.5px

-webkit-transform: translateZ(0px)

 css3硬件加速

-webkit-touch-callout

 禁止webview长按弹出框，比如禁止长按图片保存

移动端导航栏横向滚动