`

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

 

0
0
分享到:
评论

相关推荐

    jQuery页面滚动顶部固定tab选项卡切换代码

    本项目涉及的知识点是“jQuery页面滚动顶部固定tab选项卡切换代码”,这是一个常见的用户体验增强功能,常用于新闻列表或长篇内容的页面,以帮助用户在页面滚动时仍能方便地访问导航。 首先,我们来看“tab选项卡...

    jQuery Mobile 所需要的部署文件

    学习jQuery Mobile,你将了解到如何创建可滚动的列表(listviews),可滑动的面板(panels),可滑动的选项卡(tabs),可折叠的块(collapsible sets),以及各种表单组件的优化。它还支持动态页面加载,这意味着你...

    jQuery选项卡选项卡选项卡

    本示例“jQuery选项卡”旨在演示如何利用jQuery实现动态切换的选项卡功能,提供多样的皮肤选择,使得用户界面更加友好且互动性强。 选项卡组件是Web界面设计中的常见元素,用于组织和展示大量信息。它通过将相关...

    原生安卓和jquery.mobile组合做的tab选项卡

    本项目标题提到的是利用原生安卓与jQuery Mobile共同构建Tab选项卡功能,这是一种常见于移动应用界面设计中的交互元素,用于展示多个并行视图或功能模块。下面我们将深入探讨这一主题。 首先,原生安卓开发是基于...

    jquery 切换选项卡

    在网页设计中,选项卡(Tab)是一种常见的用户界面元素,用于组织和展示大量内容,同时保持页面整洁。jQuery 是一个流行的 JavaScript 库,它提供了一系列便利的 API 和方法,使得实现动态切换选项卡功能变得非常...

    jquery mobile css3手机表单页面布局按钮样式

    jQuery Mobile 是一个轻量级的框架,专为触摸设备设计,它提供了一套完整的组件和交互模式,包括表单、页面布局和按钮样式等。CSS3 则是新一代的CSS规范,引入了许多新的功能和样式效果,为网页设计提供了更多可能性...

    jquery iframe动态添加删除tab选项卡

    jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe...

    jQueryMobile-HTML5模板

    2. **自动页面导航**:通过数据-URL(data-url)属性和页面容器,jQuery Mobile可以自动管理页面的加载和切换,实现平滑的页面过渡效果。 3. **可定制的主题系统**:jQuery Mobile提供了一套主题引擎,允许开发者...

    jquerymobile设计完整例子

    jQuery Mobile 的`&lt;div data-role="navbar"&gt;`元素是创建固定顶部或底部导航栏的理想选择。每个导航项可以通过`&lt;a&gt;`标签来创建,并通过`href`属性链接到相应的页面。此外,`data-icon`属性可以添加图标,提升用户体验...

    jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z

    jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z 24H内删除,作者写书非常不容易,如觉得好,请购买纸质书籍,易读易懂!藏书不如读书,读书请买好书,这是好书。 第1章 jquery mobile简介  1.1 通用访问 ...

    通过jquery+css实现选项卡功能

    在网页设计中,选项卡(Tab)是一种常见的交互元素,用于组织和展示大量内容,而无需用户滚动或点击多个页面。本教程将详细介绍如何利用jQuery和CSS技术来创建一款功能完善的选项卡组件,并且需要引入jQuery UI库以...

    jQuery Mobile实战源码

    通过使用`data-url`属性,jQuery Mobile可以跟踪页面的历史记录,实现平滑的页面过渡效果。在源码中,你会看到如何组织这些页面元素以及如何通过链接或JavaScript进行页面导航。 表单处理是jQuery Mobile的另一大...

    JqueryMobile常见问题整理

    **jQuery Mobile 常见问题及解决方案** **一、页面跳转时重复调用 `pageinit` 方法** 在使用 jQuery Mobile 进行移动应用开发时,`pageinit` 是一个非常重要的事件,它会在每个页面加载时触发。然而,有时在页面...

    jQuery Mobile 1.1.1最新版

    2. **触摸事件处理**:jQuery Mobile 优化了对触摸事件的支持,使得开发者可以轻松地创建触控友好的交互元素,如滑动、点击和捏合缩放等手势,提高了移动应用的用户体验。 3. **主题系统**:该框架提供了一套强大的...

    jquerytabs jquery选项卡 jquery tabs

    这个组件极大地提升了用户体验,因为它允许用户在一个固定的空间内切换查看多个页面或内容部分,而无需进行页面刷新。 **一、jQuery Tabs基本使用** 在开始使用jQuery Tabs之前,你需要确保你的页面已经引入了...

    jQuery mobile相册

    jQuery Mobile相册是一种基于jQuery Mobile框架的移动应用组件,它为用户提供了一种优雅的方式来展示和浏览图片集,尤其适用于移动设备。jQuery Mobile是jQuery库的一个分支,专为触摸设备优化,提供了一套完整的UI...

    jQuery mobile滑动式的标题导航

    jQuery Mobile 提供了多种事件来监听页面的生命周期,比如`pagebeforeshow`和`pageshow`,可以用于在页面显示前或显示后执行某些操作。例如,我们可以使用`pageinit`事件初始化滑动式标题导航: ```javascript $...

    jQuery mobile 开发案例

    2. **页面结构**:jQuery Mobile 通过页面容器(page container)和页面元素(page element)组织内容。每个页面元素都是独立的,可以通过 AJAX 动态加载。 3. **主题(Theming)**:jQuery Mobile 提供了一套可...

    jquery大气的图标菜单tab选项卡切换效果代码.zip

    标题中的“jquery大气的图标菜单tab选项卡切换效果代码”指的是使用jQuery库实现的一种具有视觉吸引力的、基于图标的选项卡切换效果。这种效果通常用于网站界面设计,以提供更直观、用户友好的导航体验。jQuery是一...

    jquery mobile 1.4.1版

    最后,`jquery.mobile.structure-1.4.1.css`是一个关键文件,它定义了jQuery Mobile的页面结构和布局规则,包括页头、页脚、内容区域等元素的样式,确保了页面在不同屏幕尺寸下的适应性。 jQuery Mobile 1.4.1版的...

Global site tag (gtag.js) - Google Analytics