移动端Web页面常见问题与解决方案（yuyan）

一、meta标签

1、利用meta标签对viewport进行控制

如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

Width ---viewport的宽度 height - viewport的高度

initial-scale--- 初始的缩放比例

minimum-scale ---允许用户缩放到的最小比例

maximum-scale---允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

2、删除默认的苹果工具栏和菜单栏

3、在web app应用下状态条（屏幕顶部条）的颜色 (iphone设备中的safari私有meta标签 )

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）

若值为“black-translucent”将会占据页面px位置，浮在页面上方

4、允许全屏模式浏览 (iphone设备中的safari私有meta标签 )

5、禁止了把数字转化为拨号链接

在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标签来解决：

四、使用相对单位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);

页面应用代码如下：

八、文本超出固定行数时隐藏

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