背景:客户端使用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