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.开启弹性滚动

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

努力学习。。。