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

一、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获取服务器端数据

下面是实际开发中对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 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; //滑动的垂直距离
});
复制代码