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

阅读更多

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

      1.meta中加入以下信息

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

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

     2.在header,footer加入

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

   

    

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

  

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

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

   

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

 

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

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

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

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