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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端开发的一些技巧总结相关的知识,希望对你有一定的参考价值。

总结一下一些知识。

 

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);
}

  

努力学习。。。

  

以上是关于移动端开发的一些技巧总结的主要内容,如果未能解决你的问题,请参考以下文章

移动端H5开发常用技巧总结

你可能不知道的JavaScript代码片段和技巧(下)

你可能不知道的JavaScript代码片段和技巧(上)

移动端开发的一些技巧

移动端样式小技巧

移动端开发必须知道的小技巧(转)