我正在使用 Phonegap 将项目部署到 iOS 和 Android 平板电脑,IsotopeJS 用于布置应用程序的基于图像的菜单。
相关代码在 JSFiddle 中,有一个显着的区别,即 MainMenuInit() 被调用以响应 DeviceReady 事件,而这里它是从 document.ready 调用的。
function MainMenuInit() {
var $container = $('.isotopeMenu');
$container.imagesLoaded(function () {
ResizeMainMenuTiles();
});
}
function ResizeMainMenuTiles() {
console.log("Resizing Menu");
var $container = $('.isotopeMenu');
var $height = 250;
$container.isotope({
width: 1024,
height: 768,
itemSelector: ".isotopeItem",
layoutMode: 'masonryHorizontal',
masonryHorizontal: {
rowHeight: $height,
gutterWidth: 0
}
});
}
它正确地布置了小提琴中的项目,但是当通过 Phonegap 部署到我的 Android 设备时,同位素菜单被折叠,所有项目都覆盖在同一位置。
这是设备的屏幕截图
在设备上进行调试不会向 logCat 抛出明显的错误。