一、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获取服务器端数据
下面是实际开发中
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
问题由来：这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。
这当中最出名的，当属双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。
双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。 鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。之前人们刚刚接触移动端的页面，在欣喜的时候往往不会care这个300ms的延时问题，可是如今touch端界面如雨后春笋，用户对体验的要求也更高，这300ms带来的卡顿慢慢变得让人难以接受。
解决方案一：
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
解决方案二：
使用HTML中的meta标签来解决：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
四、使用相对单位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
2531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
