一、移动端基础：
1、测试手机项目主要考虑：
业务功能、性能稳定性、UI适配、软件包信息、易用性；
手机的页面显示和品牌没有关系，只和分辨率、屏幕密度有关系，针对主流分辨率以及产品要求的特殊分辨率的手机进行适配测试。
2、移到web前端:
分辨率：目前主流的手机分辨率为：480*800像素、320*480像素，而1280*720像素（720P）。
屏幕：目前市场上的手机屏幕分为普通屏幕和视网膜屏幕两种。
手机浏览器：UC、百度、QQ、safari、Chrome，微信。这些浏览器都是基于webkit内核的。
设计理念：便捷的操作、清爽的界面、友好的提示、少而小的图片、精简的代码等。
二、项目开发常用基础：
1）头部需要meta标签
/*启用360浏览器的极速模式(webkit)*/
/*优先使用?IE?最新版本和?Chrome*/
/*忽略页面中的数字识别为电话*/
2) 清浏览器缓存（重要）
注：清除浏览器中的缓存：
（手机页面中）
PS：清除浏览器中的缓存，它和其它几句合起来用，就可以使你再次进入曾经访问过的页面时，ie浏览器必须从服务端下载最新的内容，达到刷新的效果。
3）移动开发之touch篇（重要）(实验操作：jquery 支持touch事件)
touchstart 触摸开始（手指放在触摸屏上）
touchmove 拖动（手指在触摸屏上移动）
touchend 触摸结束（手指从触摸屏上移开）
当然还有一个touchcancel，是在拖动中断时候触发。（系统中断）
touchmove ? e.preventDefault() 方法可以取消与事件关联的默认动作
移动端WEB开发，click,touch,tap事件浅析
click?和?tap?比较
两者都会在点击时触发，但是在手机WEB端，click会有?200~300?ms，所以请用tap代替click作为点击事件。关于tap的点透处理
在使用zepto框架的tap来移动设备浏览器内的点击事件，来规避click事件的延迟响应时，有可能出现点透的情况，即点击会触发非当前层的点击事件。
touch事件touch是针对触屏手机上的触摸事件。现今大多数触屏手机webkit内核提供了touch事件的监听，让开发者可以获取用户触摸屏幕时的一些信息。
4）Rentina显示屏原理及设计方案
//image-set设计Rentina背景图
image-set,webkit私有属性，也是CSS4的属性，为解决Rentina屏幕下的图像而生。
.css {
????background: url(images/bg.jpg) no-repeat center;
????background: -webkit-image-set(
????????url(images/bg.jpg) 1x,? ? //支持image-set普通屏
????????url(images/bg-2x.jpg) 2x); //支持image-set的Rentinan
????}
注：可以引入svg的字体库，来保证不同设备的清晰度。
5）手机滚动
全局滚动? 滚动条在body节点或更顶层
局部滚动? 滚动条在body下的某一个dom节点上
ios开发
全局滚动：默认支持
局部滚动：默认没有滚动条，且滑动起来干涩。
body{-webkit-overflow-scrolling:touch;} （快速滚动和回弹）
/*局部滚动的dom节点*/
.scroll-el{overflow:auto;}
建议：将属性挂在body上，可以避免很多奇怪的bug
流畅滚动的方法：（重要）
1、body上加上-webkit-overflow-scrolling:touch;
2、IOS尽量使用局部滚动
3、IOS引进ScrollFix避免出界
4、Android下尽量使用全局滚动：?
?1）尽量不用overflow:auto
?2）使用min-height:100% 代替height:100%
5、IOS下带有滚动条且position:absolute的节点不要设置背景色
6）开启GPU硬件加速可能触发的问题：
硬件加速（*）
webkit-transform:?translateZ(0);
webkit-transform:?translate3d(0,0,0);
这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU 。
页面优化方案：(重要)
1、硬件加速
2、交互太复杂
3、整合图片， 整合css，js
4、服务器启动Gzip压缩
5、最好的建议是，删场景，删内容
注：提高网页性能，就是要降低"重排（结构）"和"重绘（样式）"的频率和成本，尽量少触发重新渲染。
通过-webkit-transform:transition3d/translateZ开启GPU硬件加速的适用范围：
1、使用很多大尺寸图片(尤其是PNG24图)进行动画的页面。
2、页面有很多大尺寸图片并且进行了css缩放处理，页面可以滚动时。
3、使用background-size:cover设置大尺寸背景图，并且页面可以滚动时。
4、编写大量DOM元素进行CSS3动画时(transition/transform/keyframes/absTop&Left)
5、使用很多PNG图片拼接成CSS?Sprite时
三、项目开发问题：
1) 1像素边框问题
1px变粗的原因？
viewport的设置和屏幕物理分辨率是按比例而不是相同的.
移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。
解决1px问题：transform: scale(0.5) 方案 - 推荐: 很灵活
li:before{position:absolute;top:-1px;left:0;content:"";width:100%;height:1px;border-top:1px solid #ddd;-webkit-transform:scaley(0.5);}
2、拍照取相册 accept="image/*（重要）
capture表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音。? ?
项目开发结果：
测试环境：
苹果手机 （IOS）：钉钉测试、微信测试、Safari测试
测试手机：
1、苹果手机 （IOS）：
iphone6s plus（拍照、照片图库、iCloud）
iphone XR（拍照、照片图库、浏览）
2、安卓手机 （Android）：
小米 MUI 10.9.6.20开发版
微信测试：出现弹出框（截图、文件）选择文件可以打开相册。
vivo Y66L、华为 Honor V10?华为 mate9?三星 S10?oppo A57
微信测试：出现弹出框（相机、文档）选择文档进行打开相册。
MEIZU? M1046
微信测试：出现弹出框（相机、图库、文档）选择图库可以打开相册。
相同点：
钉钉测试：出现弹出框（照片和视频、手机文件）可以打开相册。
qq浏览器测试：出现弹出框（相机、拍照）选择相机可以打开相册。
3）oninput事件，实时验证
1）大部分手机输入英文和单个汉字时会按这个顺序依次执行一遍，输入多个汉字时只执行一次input事件。测试机（小米3，联想，广信s5）,点击特殊键回车或前往 也会执行keydown，keypress，keyup
2）三星的比较特殊，点击任何键都有两次keydown 两次keyup一次input
结论：
1.keyup在输入多个汉字时不执行
2.特殊键时没必要执行keyup
3.三星会执行多次keyup
改进事件：用oninput事件
参考：多看网页版和wap版用的input事件，腾讯wap版无此功能。
另外，onchange事件排除，这个事件只有在失去焦点时才执行。
例如：
文本框实时统计字数
keydown事件和onchange事件来做
onchange事件必须在表单失去焦点时才触发，无法做到实时统计；
keydown似乎能够满足要求，但是当你用鼠标复制粘贴的时候会发现字数改变了，但事件没有监听到，存在一定的漏洞。
4）部分android系统中元素被点击时产生的边框怎么去掉
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
有些机型去除不了，如小米2
对于按钮类还有个办法，不使用a或者input标签，直接用div标签
5) ios端兼容input光标高度
问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。
解决办法：高度height和行高line-height内容用padding撑开，不要用line-height属性。
6）移动端Web开发,怎么把ios下?input[type="text"]的圆角变成直角
可是在ios下?input框仍然有圆角,
Android和PC下为直角.
border-radius:?0;
7）去除系统默认的样式
使用-webkit-appearance:none可去除系统默认的样式（重要）
注：只有两个内核的浏览器可以使用，其一是“webkit”，其二是“ff”的
8）webkit表单输入框placeholder的颜色值改变
input::-webkit-input-placeholder{color:#888;}
textarea::-webkit-input-placeholder { color: #f00; }
9）禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片
.css{-webkit-touch-callout: none}
10）禁止ios和android用户选中文字
.css{-webkit-user-select:none}
11）打电话发短信邮件的实现
12）ios使用-webkit-text-size-adjust禁止调整字体大小
body{-webkit-text-size-adjust: 100%!important;}
最好的解决方案：
整个页面用rem或者百分比布局
13）多行文本溢出显示省略号(…)（重要）
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
14）禁止操作 css3属性需要研究
pointer-events:none;?
15）:before? :after使用
( input，img，iframe等元素都不能包含其他元素，所以不能通过伪元素插入内容。)
16）多背景效果
例如：background:url(../img/logo.png) no-repeat 20px 40px,url(../img/bg1.jpg) no-repeat center;background-size:107px auto,cover;
17）calc用于动态计算长度值
css3的一个新增的功能，用来指定元素的长度。? (解决撑破容器的问题)
width:-webkit-calc(100% - 9px);? ? 个人信息 input输入框撑破问题
18）css3?font-smoothing??（主要用于font-face?引入的字体）
css3中用于设置字体的抗锯齿或者说光滑度的属性。
font-smoothing:subpixel-antialised?|?none?|?antialiased
取值说明：
none对低像素的文本比较好，subpixel-antialised浏览器默认的、antialiased抗锯齿很好。
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;??清晰的作用