我试着用photoswipe和iScroll4来摆弄,但是我想让用户捏住缩放,而iScroll4似乎不适用于Android版本< = 1.6,根据我对Android模拟器SDK所做的测试。我认为我可以尝试一些更适合我需求的东西。
因此,AFAIK和我可能是非常错误的,没有办法在Android设备上跟踪每个元视口标记的缩放级别。 jQuery Mobile没有这样的功能;也许Sencha,Phonegap或者一些Android Java库促进了这一点,我很乐意被纠正!
现在,它不是最好的方法,但我想出了一种方式,似乎在1或2像素内是准确的,最坏的情况。我不确定Android是否会在定位更改事件中天生改变它的缩放级别,但是我给了我的方法一个镜头并且工作。
下面的代码:
$(document).ready(function(){
var ViewportWidth = document.documentElement.clientWidth;
var LayoutWidth = document.documentElement.clientWidth;
$("#Index").css("width", LayoutWidth);
var SetLayoutWidth = function() {
LayoutWidth = Math.round((1/(ViewportWidth/LayoutWidth)) * document.documentElement.clientWidth);
$("#Index").css("width", LayoutWidth);
}
$(window).resize(function() {
ViewportWidth = document.documentElement.clientWidth;
});
$(window).bind("orientationchange", function(event) {
if (navigator.userAgent.match(/android/i))
if (Math.abs(window.orientation) == 90 && event.orientation == "landscape")
SetLayoutWidth();
else if (!window.orientation && event.orientation == "portrait")
SetLayoutWidth();
});
});
当用户放大,视觉视口宽度的变化,它的值被存储。用户缩放后,可视视口与布局视口宽度的比例为0.8。现在,当用户改变设备的方向时,比例被除以1.为了实现全屏布局视口宽度,在这个例子中,我需要占用视觉视口宽度的125%。
我知道的一个问题可能会蔓延起来,即resize事件可能会在方向更改事件之前触发。我在测试中没有看到这种情况,但是如果确实发生,我需要确定如何解决这个问题。
谢谢。