1.利用CSS穿透
|
1
|
img{pointer-events: none;} |
|
1
|
select{-webkit-appearance: none;} |
3.文本溢出处理
移动设备相对来说页面较小，很多时候显示的一些信息都需要省略部分。最常见的是单行标题溢出省略，多行详情介绍溢出省略。
css代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
//单行.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代码如下：
|
1
2
3
4
|
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代码如下：
|
1
2
3
|
img{ max-width:100%;} |
10.一像素边框设置
很多时候，想保持边框的大小在任何设置上都是1px，但是因为1px使用2dp渲染，也就是说会显示为2px大小。所以，要采用css3缩放一下。
css代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.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);} |