一、meta标签
1、利用meta标签对viewport进行控制
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。
Width ---viewport的宽度 height - viewport的高度
initial-scale--- 初始的缩放比例
minimum-scale ---允许用户缩放到的最小比例
maximum-scale---允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
2、删除默认的苹果工具栏和菜单栏
<meta name="apple-mobile-web-app-capable" content="yes">
3、在web app应用下状态条（屏幕顶部条）的颜色 (iphone设备中的safari私有meta标签 )
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）
若值为“black-translucent”将会占据页面px位置，浮在页面上方
4、允许全屏模式浏览 (iphone设备中的safari私有meta标签 )
<meta content="yes" name="apple-mobile-web-app-capable">
5、禁止了把数字转化为拨号链接
<meta name="format-detection" content="telephone=no">
在iPhone上默认将电话号码变为超链接（蓝色字体）并且点击这个数字还会自动拨号
二、使用ajax获取服务器端数据
下面是实际开发中对jquery的$.ajax() 的简单封装：
mobile.myAjax=function(api,data,success,error){ $.ajax({ type:'POST', url:preURL+api, data:(typeof data==='object')?JSON.stringify(data):data, contentType:'application/json;charset=UTF-8', success:success, error:error || function(){ tips("系统繁忙，请求数据失败！"); } });}复制代码其中，preURL是服务器的地址前缀，api是接口地址
调用实例如下：
mobile.myAjax('cqeye/getProgramInfo',{cid:getId},function(data){if(data.code===0){ console.log(data); //data即为返回的数据}else{ tips('获取数据失败'); }}复制代码三、用click点击事件会延迟300ms（仅仅限于ios端）
原因：当用户一次点击屏幕之后，浏览器并不能立刻判断用户是要进行双击缩放，还是想要进行单击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。
解决方案：
1、 FastClick是FT Labs专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到click事件的时候，会通过 DOM 自定义事件立即触发一个模拟 click 事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。
FastClick 的使用方法非常简单，在 window load 事件之后，在body上调用FastClick.attach()即可。
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
2、使用轻量的移动端类库，如zepto.js等都支持tap事件来解决这个问题，尽管它们的响应速度比FastClick慢一些
3、解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应
触摸事件的响应顺序
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick
四、使用相对单位rem
在手机端页面开发中，一般用百分比设置元素的宽度，用rem相对单位设置高度和字体大小，同时设置根元素html{font-size:50px;}，加上js可实现元素的宽高随着页面的宽高变化而变化
js代码如下：
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth < 720? docEl.clientWidth : 720
if (!clientWidth)
return;
docEl.style.fontSize = Math.floor(100 * (clientWidth / 640)) + 'px';
};
if (!doc.addEventListener)
return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
复制代码
这段js代码当页面的高度小于720px时，通过改变根元素的font-size来改变元素的高度和字体大小；
五、手机旋转屏幕事件onorientationchange
小视屏切换到全屏播放时，在页面添加屏幕方向改变的监听，调用原生方法后会触发该监听，我们可以根据屏幕的转向进行相应操作。
js代码如下：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", orientationChange, false);
function orientationChange(){
var direction=window.orientation;
if(direction===0||direction===180){
//竖屏 portrait
}else if(direction===-90||direction==90){
//横屏 landscape
}
}
复制代码
六、自定义返回键
有时候单纯调用浏览器默认的返回方法不能满足实际业务的需求，这时需要用到HTML5的local Storage自己写返回键：在页面跳转时把当前页面的路径保存到缓存中，再返回时获取返回的路径。
页面跳转：
function go(url){
var backURI = location.href;
var backUrlList = JSON.parse(localStorage['back_url_list'] || '[]');
var len=backUrlList.length;
if(backUrlList[len-1]!=backURI){
backUrlList.push(backURI); //保存当前页面的地址
}
localStorage['back_url_list'] = JSON.stringify(backUrlList)；
location.href = url;
}复制代码
返回：
function goBack(){
/* 页面返回时从缓存中获取返回地址，获取不到返回首页*/
var backUrlList = JSON.parse(localStorage['back_url_list'] || '[]');
var backURL = backUrlList.pop() || ('index.html');
localStorage['back_url_list'] = JSON.stringify(backUrlList);
var html=location.pathname;
location.href = backURL;
}
复制代码
七、图片懒加载
原理：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来 。
js代码如下：
;(function($){ //分号是避免在代码合并时和上一部分的代码合并后出错
$(window).on('scroll resize load', function(e){
var count = 0, screenHeight = $(window).height();
$('[data-lazy-src]').each(function(){
var pos = this.getBoundingClientRect();
// 如果当前图片在视野上方，继续往下查找
if(pos.bottom <= 0) return true;
// 如果超过2张图片在视野下方，停止查找，只有图片布局从上到下才能这样判断
if(pos.top >= screenHeight) return (count++)<2;
var src = this.dataset.lazySrc;
if(!src) return;
if(this.nodeName === 'IMG') this.src = src;
else this.style.backgroundImage = 'url(' + src + ')';
this.removeAttribute('data-lazy-src');
});
});
})(jQuery);复制代码
页面应用代码如下：
<!-- 只要给div或者img添加data-lazy-src属性即可实现图片懒加载 -->
<div class="sample" style="backgrouond-image:url(images/spacer.gif)" data-lazy-src="images/02.jpg"></div><img class="sample" src="images/spacer.gif" data-lazy-src="images/02.jpg"/>复制代码八、文本超出固定行数时隐藏
1、文字超出一行隐藏
.text{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: .24rem;}
2、文字超出2行隐藏
.text-line2{display: -webkit-box!important; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp:2;}
九、获取手势在一个元素内滑动的距离
js代码如下:
$('#play-content').on('touchstart',function(e){
startX = e.originalEvent.touches[0].pageX;
startY = e.originalEvent.touches[0].pageY;
}).on('touchmove',function(e){ //左右滑动屏幕
var endX = e.originalEvent.touches[0].pageX;
var endY = e.originalEvent.touches[0].pageY;
var moveX=parseInt(endX - startX);
var moveY=parseInt(endY - startY);
var disX=moveX<0?moveX*(-1):moveX; // 滑动的水平距离
var disY=moveY<0?moveY*(-1):moveY; //滑动的垂直距离
});
复制代码十、页面知识点
1.在ios浏览器中，长按html页面的a标签会弹出浏览器自带的菜单，并且点击菜单的选项也可以进入相应的链接页面。
/*禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片*/
*:not(input,textarea) { -webkit-touch-callout: none; touch-callout: none; -webkit-user-select: none; user-select: none;}
2、如果想要自定义一个图片的显示宽高比例，又不想图片变形，可以用div的背景居中显示该图片
div样式设定如下：
.back-img{background-position: 50% 50%;background-size: cover;}
3、当页面有输入框时，点击输入框输入内容手机会弹出软键盘，浏览器可能会将整个页面向上移动，可以设置整个html{position:fixed;width:100%;}使整个页面固定不移动；
但如果是软键盘完全挡住输入框的情况，可以设置页面的头部header{position:fixed;width:100%;}使页面头部固定，让浏览器自动将页面头部以下的内容，从而显示输入框。
4、使输入框获取焦点可以用$('#id').focus()方法，但是要想在获得焦点的同时弹出手机的软键盘要用$('#id')[0].focus()；
5、在jquery的ajax中，$(this)变成了jquery的xhr对象 ，所以在ajax之前到获取this对象赋值给一个局部变量
6、如果设置dom.width（10rem），那总的宽度就是10rem+padding(px)+border(px);
如果设置dom.css（width,10rem）, 那总的宽度就是10rem
7、Object.keys(obj).length计算对象obj的长度
8、-webkit-user-select的取值
none：文本不能被选择
text：可以选择文本
all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element：可以选择文本，但选择范围受元素边界的约束
9、用jquery获取一个元素的背景图片时$('#id').css('background-image')，由于手机的兼容性问题，返回的格式可能有两种：
url("aa.jpg")或者url(aa.jpg)，如果我们要使用这张图片的路径要先统一把引号去掉，否则使用出错；
$('#id').css('background-image').replace(/"/g,'').slice(4,-1); 得到aa.jpg
