近期移动端网站碰到的问题及解决方案总结

  • 2018-08-31
  • 81
  1. 在QQ内置浏览器上,一个大致如下布局的页面:
<ul>
  <li><a href="/a">商品a</a></li>
  <li><a href="/b">商品b</a></li>
  <li><a href="/c">商品c</a></li>
  <li><a href="/d">商品d</a></li>
  <li><a href="/e">商品e</a></li>
  <!-- more ...-->
</ul>

上下滑动页面过程中,极易误点入商品的链接中。
猜测原因为:QQ内置浏览器对于click事件的触发判断时间存在问题,导致用户在滑动过程中误触发了click事件。

解决方案:使用模拟的tap事件。Hammer.JS fastclick

2.依然是在QQ内置浏览器上,一个如下布局的页面:

<body>
    <h1>商品展示</h1>
    <ul>
      <li><a href="/a">商品a</a></li>
      <li><a href="/b">商品b</a></li>
      <li><a href="/c">商品c</a></li>
      <li><a href="/d">商品d</a></li>
      <li><a href="/e">商品e</a></li>
      <!-- more ... --> 
    </ul>
</body>
*{
    margin:0;
    padding:0;
}
html,body{
    height:100%
}
h1{
    height:10%;
}
ul{
    height:90%;
    list-style:none;
    overflow:hidden auto;
}

说人话就是:页面的高度刚好100%,所以,页面的纵向滚动条不会出现,上部的h1与下部的ul高度都固定,加起来刚好是100%,然后,ul在子元素多的情况下会出现纵向滚动条。
那么问题来了:ul区域内,上滑页面是没问题的,但是,下滑大概率会触发QQ内置浏览器原生的下拉事件,导致ul滚动失效,浏览器整体被拉下来了。
猜测原因为:用户不断上滑后的首次下滑,浏览器内部会检测整个网页区域是否可滑动,没有的话便会触发原生的事件,导致ul的滚动事件失效

解决方案:在ul之后再加一个元素,高度为1px,使得浏览器刚好出现原生滚动条,但又不影响页面的整体效果

3.用户名片展示简介,前后都需要双引号图片包裹,最多显示三行,超出的话末尾显示省略号,依然还是需要反引号图片,效果如图:


多行文本超出显示省略号,是比较容易的,纯CSS就可以实现:

  word-break: break-all;
  overflow:hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

那个反引号的显示就需要花点心思了,毕竟我们无法知道文本到底显示了几行,也无法知道文本是否已经到了结尾。
解决思路:三行文本区域高度自适应,设置为相对定位,然后在文本末尾放置一个span标签,背景设置为反引号图片,定位设置为绝对定位,不要设置定位值,然后通过js判断spanbottom值,正常情况,若bottom值为0,说明文本未超出显示区域,若bottom值小于0,说明文本被挤下去了,这时,手动给span设置right为0,bottom为0,就达成目的了。

在线效果

4.safari回退的时候白屏(Vue)
原因未知,反馈该类问题的很多vue#5533mint-ui#937 ,都没有给出问题的根源。
临时解决方案:
①fetch到数据后调用:

Vue.nextTick().then(() => {
    window.scrollTo(0, 1);
    window.scrollTo(0, 0);
});

②利用vue-router

const router = new VueRouter({
  routes: [],
  scrollBehavior () {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ x: 0, y: 1 });
      }, 0);
    })
  }
})

③改变布局方式
参考vue#7229