jquery mobile 固定页眉页脚下的选项卡页面缩放问题

        背景：客户端使用phonegap开发，我们选择了jquery mobile1.4.2+html5+css3的技术实现。页面中有三个选项卡页面(tab页是自己写的div)，左右滑动，可以切换页面。手机端页面信息的字体显示出来太大，影响观感，但对于某些信息想要放大看怎么办？我就想将整个页面进行缩放，因此做了以下处理：

      1.meta中加入以下信息

      user-scalable=yes   表示页面可以缩放

      maximum-scale   表示最大比例为1.2倍

 <meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=1.2" />

     2.在header,footer加入

    data-disable-page-zoom="false"  表示规定用户是否有能力缩放页面

<div id="tabs" data-role="header" data-disable-page-zoom="false" data-position="fixed"> 

   

<div data-role="footer" data-position="fixed" data-disable-page-zoom="false"> 

    

   第一阶段结论：单页的页面可以进行页面缩放，没什么问题

  

   问题的出现：因为我的页面中是有三个tab页，左右滑动切换tab页，当页面被放大后，页面需要左右滑动才能看到放大后被遮住的区域，但是左右滑动的操作已经绑定了切换页面，所以只要一滑动，页面就被切换到下一个tab页了，怎么办呢？

   解决办法：判断当前页面的缩放比例，如果超过某个比例，进行提示，【请先还原页面比例，再切换选项卡页面】，否则切换页面。

   

 <script>
	        var zoom ='';
			//500毫秒计算一次
	        setInterval(function(){
			    // window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
				//screen.width 屏幕分辨率的宽
				 var deviceWidth = (Math.abs(window.orientation) == 90) ? screen.height : screen.width;
				 // Firefox、Chrome、Safari、Opera 支持 ; window.innerWidth 没有减去右边下拉条
				 zoom = deviceWidth / window.innerWidth;
			},500)
			$(function() {
			    //#page是整个页面的div的id
				$("#page").on("swipeleft",function(){
				    if (zoom>1.05){//我这里设置的是1.05，可以根据具体情况，设置大于多少倍进行切换页面
					    alert('请先还原页面比例，再切换选项卡页面');
						return false;
				    }
					//以下是切换页面代码，此处省略几行代码。。。。
				  });    
				 $("#page").on("swiperight",function(){
				    if (zoom>1.05){
						alert('请先还原页面比例，再切换选项卡页面');
						return false;
				    }
					//以下是切换页面代码，此处省略几行代码。。。。
				  });				 
			})
		</script>  

 以上是我的解决办法，可能还有更好的方法，暂时没有想到。

 

分享两个判断页面缩放比例的组件：

国外的：http://tombigel.github.io/detect-zoom/

国内的：也是参考了上面国外哥们的代码写的，https://github.com/zxlie/zoom-detect

这哥们网站：http://www.baidufe.com/component/zoom-detect/index.html