web APP 开发之踩坑手记

屏蔽输入框怪异的内阴影

-webkit-appearance:none

禁止自动识别电话和邮箱

<meta content="telephone=no" name="format-detection" /> <meta content="email=no" name="format-detection" />

禁止用户选择文本

-webkit-user-select:none

宽度设置为100%，加了padding或border后出现滚动条

box-sizing:border-box

touchcancel 事件

touchcancel事件 是当某种touch事件非正常结束时触发，属于系统事件。

300ms 单击延时

click事件因为要等待双击确认，会有300ms延时，在移动端体验不好。开发者大多会使用封装的tap事件来代替click事件，所谓的tap事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。

移动端点透事件

base64编码图片替换url图片

对于一些小图片icon之类的，可以将图片用base64编码，来减少网络请求。

手机拍照和上传图片

`

`

transfrom: translate3d 开启动画GPU硬件加速。

ios体验良好，但在一些低端Android机型可能有意想不到效果。

设置placeholder ，但当focus的时候文本没有隐藏。

input:focus::-webkit-input-placeholder{ opacity: 0; }

background-image和image的加载区别

在网页加载的过程中，以css背景图存在的图片background-image会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html中的标签img是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会先加载标签img的内容，再加载背景图片background-image，如果你用引入了一个很大的图片，那么在这个图片下载完成之前，img后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。

移动端1像素问题

//方案1(手淘解决方案)：通过js
 window.onload = function () {
   var dpr = window.devidePixelRatio;
   var scale = 1/dpr;
   var width = document.documentElement.clientWidth;
   //根据设备像素比，改变缩放比initial-scale
   var metaNode = document.querySelector('meta[name="viewport"]');
   metaNode.setAttribute('content','width=device-width,initial-scale='+scale+',user-scalable=no');
   //页面中元素宽度高度等，比例反向乘回来
   var htmlNode = document.querySelector('html');
   htmlNode.style.fontSize = width * dpr + 'px'; 
 }

// 方案2  通过css媒体查询和伪类
# box{
  width: 200px;
  height: 200px;
  position: relative;
}
#box:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0; 
  width: 100%;
  height: 1px;
  background: #000;
}
@ media screen and (-webkit-min-device-pixel-ratio:2){
  #box:before{
    transform:scaleY(0.5);
  }
}
@ media screen and (-webkit-min-device-pixel-ratio:3){
  #box:before{
    transform:scaleY(0.3333333);
  }
}