移动端开发的一些技巧总结

Posted 2020-08-20

总结一下一些知识。

 

1.利用CSS穿透

常见发生场景：假如我们需要通过input，type=‘file’来上传文件，而这个input的默认样式，可以说是非常地“不人道”。所以我们希望通过一张图片，与这个input大小一样，位置一致地盖在上面。这个时候，显然，这个时候点击图片，input是不会起作用的。就是因为img隔绝了click的穿透，而我们希望的是，这个img只是视觉上遮挡了input的样式，但是点击的时候还是点击到input。所以，只要让img可穿透即可。

css代码如下：

img{pointer-events: none;}

2.实现自定义原生select控件的样式

由于select移动端原生样式很丑，但是原生弹出效果是符合我们设计的原则。直接修改select的样式的时候，一个奇怪的现象出现了，在chrome上调试的时候，自己定义的样式起了作用，在android手机上也起了作用，但是到了ios手机上就不行了，典型的不兼容问题，这个时候禁用原生的样式即可。

css代码如下：

select{-webkit-appearance: none;}

3.文本溢出处理

移动设备相对来说页面较小，很多时候显示的一些信息都需要省略部分。最常见的是单行标题溢出省略，多行详情介绍溢出省略。

css代码如下：

//单行
.single{
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
}
//多行
.more{
    display:-webkit-box !important;
    overflow:hidden;
    text-overflow:ellipsis;
    work-break;break-all;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; //指定行数
} 

4.300毫秒的故事

  移动设备访问的web页面都是pc上的页面。在默认的viewport（980px）的页面往往都是需要“双击”或“捏开”放大页面来看清页面。而正是为了确认用户是“双击”还是“单击”。safari需要个300ms的延迟来判断。而后来的iphone也一直沿用这样的设计，再后来android也沿用了这样的设计。于是，“300ms的延迟”就成了一道规范。

处理方法：

使用自定义Tap事件代替click事件。 原理：在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置（或允许移动一个非常小的位移值）且时间间隔较短（一般认为是200ms），且过程中未曾触发过touchmove，即可认为触发了手持设备上的click，一般称它为“tap”。　　

5.Tag透传的解决方案

①.使用缓动动画，过渡300ms的延迟。

②.中间层dom元素加入，让中间层接受这个“穿透”事件，稍后隐藏。

③.“上下”都使用tap事件，原理上解决tap透传事件（但不可避免原生标签的click事件）。

④.改用Fastclick的库。

6.开启弹性滚动

css代码如下：

body{
   overflow:scroll;
   -webkit-overflow-scrolling:touch;
}

注意：Android不支持原生的弹性滚动，但可以借助第三方库iScroll来实现。

7.点击不灵敏

起因：由于使用touch触发自定义tap事件，提速约200ms，但是touch事件对点击区域要求更大，偶有不触发。

解决方案：

①同时使用touchend和click触发tap事件，如果touchend已经处理，则click不处理。

②全局捕获click事件，如果click事件和tap事件的点击坐标一致，且相差不到1s。则在捕获阶段阻止事件默认行为的同时取消冒泡。

8.chrome调试快捷键

①ctrl+shift+f  全文查找

②ctrl+o  查找文件名

③ctrl+shift+o 查找js函数名　　

9.弹性图片

主要用在百分比布局中，用一个父标签包裹img标签，父元素的宽度用媒体查询来改变。

css代码如下：

img{
  max-width:100%;
}

10.一像素边框设置

很多时候，想保持边框的大小在任何设置上都是1px，但是因为1px使用2dp渲染，也就是说会显示为2px大小。所以，要采用css3缩放一下。

css代码如下：

.folder li{
   position:relative;
    padding:5px;
}
.folder li+li:before{
    position:absolute;
    top:-1px;
    left:0;
    content:‘ ‘;
    width:100%;
    height:1px;
    border-top:1px solid #ccc;
    -webkit-transform:scaleY(0.5);
}

　　

努力学习。。。