设置viewport后Colorbox在iPhone中不能居中显示
2012-07-04 10:30
393 查看
如上图,Colorbox(version:1.3.19 + jQuery 1.7.2 )在iPhone浏览器中未能屏幕居中显示。查了半天,发现是由于页面设置了viewport,而Colorbox中使用了$window.width()/$window.height()来获取计算弹出窗口的位置所致。
为了适应移动设备,一般我们会设置Viewport(可视区纠正)。即在<head>头中添加如下设置:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
width=device-width代表可视区域宽度为设备宽度
initial-scale=1代表用户打开页面时的放大级别为1,即默认1:1显示
user-scalable=no为禁止用户缩放
作以上设置以后,$window.width()获取到的宽度在iPhone中即是device-width( 320px / 480px )。也就是说,上图的情况实际上是在将页面缩放到非320*480尺寸或者移动之后会出现,显示会变得很扭曲。
我们可以在Colorbox的源代码中找到如下这段:
if (settings.right !== false) { left += Math.max($window.width() - settings.w - loadedWidth - interfaceWidth - setSize(settings.right, 'x'), 0); } else if (settings.left !== false) { left += setSize(settings.left, 'x'); } else { left += Math.round(Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2); } if (settings.bottom !== false) { top += Math.max($window.height() - settings.h - loadedHeight - interfaceHeight - setSize(settings.bottom, 'y'), 0); } else if (settings.top !== false) { top += setSize(settings.top, 'y'); } else { top += Math.round(Math.max($window.height() - settings.h - loadedHeight - interfaceHeight, 0) / 2); }
为了能在iPhone中获得较好的显示效果,我们可以将$window.width()/$window.height()改为window.innerWidth/window.innerHeight。Colorbox即可以在屏幕中居中显示。
但是,请注意window.innderWidth/window.innerHeight在IE8及以下浏览器中是不被支持的,也就是说可能需要做个判断,对于两种情况使用不同的函数。
这个bug我在GetHub上提出,得到的回复是,这是jQuery的一个小BUG,将会在jQuery 1.8版本中得到修复。所以,遇到相同问题的同志们,要么等jQuery升级,要么还是老老实实改插件代码吧!
事实上还有一种方案就是不要设置width=device-width。
相关文章推荐
- 设置viewport后Colorbox在iPhone中不能居中显示
- table表格在设置文字垂直居中后,在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行
- swing设置JTable的单元格内容居中显示、不能被编辑,隐藏某一列
- swing中设置JTable的单元格不能被编辑、内容居中显示、隐藏JTable中的某一列
- jqGrid treeGrid初始化显示时为什么不能设置成收缩?
- java设置JTable中作为序号显示的第一列居中显示
- Qt之设置窗体居中显示
- 根据用户使用的是iphone还是ipad来设置显示内容的大小
- ios6 不能激活,想刷回ios5 ,但是itunes无法显示iphone信息,怎么办
- 如何设置图片、文字在容器(div)中垂直居中的显示?
- C#怎么设置子窗体在主窗体中居中显示
- 在asp.net中,如果设置表格高度100%,但是表格依然不能满屏显示。
- Qt窗口屏幕居中显示以及设置大小
- Qt 设置窗口居中显示和窗体大小
- qt设置窗口在桌面居中显示
- 设置 gridview 数据 居中 显示
- 设置文字居中显示的三句代码
- qml tableview红白间隔显示且行高可设置,并且cell 文字居中显示
- Android-Toolbar title文字大小设置及居中显示
- sqlserver 当IDENTITY_INSERT 设置为OFF时,不能向表中的标识列插入显示值