我试图摆弄photoswipe和iScroll4,但是我希望用户能够进行缩放,而iScroll4似乎不适用于Android Ver< = 1.6,根据我在Android Emulator 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%。
我知道可能出现的一个问题是调整大小事件可能会在方向更改事件之前触发。我没有看到这种情况发生在测试中,但我需要确定如何解决这个问题,如果确实发生了。
谢谢。