背景:客户端使用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
相关推荐
本项目涉及的知识点是“jQuery页面滚动顶部固定tab选项卡切换代码”,这是一个常见的用户体验增强功能,常用于新闻列表或长篇内容的页面,以帮助用户在页面滚动时仍能方便地访问导航。 首先,我们来看“tab选项卡...
学习jQuery Mobile,你将了解到如何创建可滚动的列表(listviews),可滑动的面板(panels),可滑动的选项卡(tabs),可折叠的块(collapsible sets),以及各种表单组件的优化。它还支持动态页面加载,这意味着你...
本示例“jQuery选项卡”旨在演示如何利用jQuery实现动态切换的选项卡功能,提供多样的皮肤选择,使得用户界面更加友好且互动性强。 选项卡组件是Web界面设计中的常见元素,用于组织和展示大量信息。它通过将相关...
本项目标题提到的是利用原生安卓与jQuery Mobile共同构建Tab选项卡功能,这是一种常见于移动应用界面设计中的交互元素,用于展示多个并行视图或功能模块。下面我们将深入探讨这一主题。 首先,原生安卓开发是基于...
在网页设计中,选项卡(Tab)是一种常见的用户界面元素,用于组织和展示大量内容,同时保持页面整洁。jQuery 是一个流行的 JavaScript 库,它提供了一系列便利的 API 和方法,使得实现动态切换选项卡功能变得非常...
jQuery Mobile 是一个轻量级的框架,专为触摸设备设计,它提供了一套完整的组件和交互模式,包括表单、页面布局和按钮样式等。CSS3 则是新一代的CSS规范,引入了许多新的功能和样式效果,为网页设计提供了更多可能性...
jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe...
2. **自动页面导航**:通过数据-URL(data-url)属性和页面容器,jQuery Mobile可以自动管理页面的加载和切换,实现平滑的页面过渡效果。 3. **可定制的主题系统**:jQuery Mobile提供了一套主题引擎,允许开发者...
jQuery Mobile 的`<div data-role="navbar">`元素是创建固定顶部或底部导航栏的理想选择。每个导航项可以通过`<a>`标签来创建,并通过`href`属性链接到相应的页面。此外,`data-icon`属性可以添加图标,提升用户体验...
jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z 24H内删除,作者写书非常不容易,如觉得好,请购买纸质书籍,易读易懂!藏书不如读书,读书请买好书,这是好书。 第1章 jquery mobile简介 1.1 通用访问 ...
在网页设计中,选项卡(Tab)是一种常见的交互元素,用于组织和展示大量内容,而无需用户滚动或点击多个页面。本教程将详细介绍如何利用jQuery和CSS技术来创建一款功能完善的选项卡组件,并且需要引入jQuery UI库以...
通过使用`data-url`属性,jQuery Mobile可以跟踪页面的历史记录,实现平滑的页面过渡效果。在源码中,你会看到如何组织这些页面元素以及如何通过链接或JavaScript进行页面导航。 表单处理是jQuery Mobile的另一大...
**jQuery Mobile 常见问题及解决方案** **一、页面跳转时重复调用 `pageinit` 方法** 在使用 jQuery Mobile 进行移动应用开发时,`pageinit` 是一个非常重要的事件,它会在每个页面加载时触发。然而,有时在页面...
2. **触摸事件处理**:jQuery Mobile 优化了对触摸事件的支持,使得开发者可以轻松地创建触控友好的交互元素,如滑动、点击和捏合缩放等手势,提高了移动应用的用户体验。 3. **主题系统**:该框架提供了一套强大的...
这个组件极大地提升了用户体验,因为它允许用户在一个固定的空间内切换查看多个页面或内容部分,而无需进行页面刷新。 **一、jQuery Tabs基本使用** 在开始使用jQuery Tabs之前,你需要确保你的页面已经引入了...
在IT行业中,jQuery Mobile是一种广泛使用的前端框架,它专门用于构建响应式和触屏友好的移动Web应用。jQuery Mobile提供了一系列的UI组件和交互效果,其中包括我们今天要讨论的主题——相册样式。在这个主题下,...
jQuery Mobile相册是一种基于jQuery Mobile框架的移动应用组件,它为用户提供了一种优雅的方式来展示和浏览图片集,尤其适用于移动设备。jQuery Mobile是jQuery库的一个分支,专为触摸设备优化,提供了一套完整的UI...
jQuery Mobile 提供了多种事件来监听页面的生命周期,比如`pagebeforeshow`和`pageshow`,可以用于在页面显示前或显示后执行某些操作。例如,我们可以使用`pageinit`事件初始化滑动式标题导航: ```javascript $...
2. **页面结构**:jQuery Mobile 通过页面容器(page container)和页面元素(page element)组织内容。每个页面元素都是独立的,可以通过 AJAX 动态加载。 3. **主题(Theming)**:jQuery Mobile 提供了一套可...
标题中的“jquery大气的图标菜单tab选项卡切换效果代码”指的是使用jQuery库实现的一种具有视觉吸引力的、基于图标的选项卡切换效果。这种效果通常用于网站界面设计,以提供更直观、用户友好的导航体验。jQuery是一...