Chrome 的移动仿真有多可靠？

Question

我有这个问题——似乎只是有时——jquery-embedly 在 Chrome 的移动仿真下会弄乱iScroll（如果我禁用触摸仿真或完全禁用移动仿真，则可以正常工作）：

http://jsfiddle.net/frank_o/nRrB5/

我询问过的很多 Android 用户都能够在他们的原生设备上正常滚动——这可能是由于 Chrome 中的移动仿真错误造成的吗？如果是这样，有人知道是什么让它恐慌吗？

$(document).on('pagecontainershow', function () {

    // ISCROLL

    $('[data-iscroll]').each(function () {
        $(this).wrapInner("<div class='scroller'></div>")
            .wrapInner("<div class='scroller_wrapper'></div>");

        var wrapper = $(this).find('.scroller_wrapper').first(),
            windowHeight = $(window).height();

        wrapper.height(windowHeight);

        var scrollerTest = new IScroll(wrapper.get(0), {
            eventPassthrough: false,
            scrollX: false,
            scrollY: true,
            preventDefault: false,
            scrollbars: true
        });


        scrollerTest.on('scrollEnd', function () {
            // For Android users to see whether it's iScroll or their native scroller
            $('.ui-page').css('background', '#ccc')
        });
    });

    document.addEventListener('touchmove', function (e) {
        e.preventDefault();
    }, false);


    // EMBEDLY
    var element = $('a');

    element.embedly({
        key: '',
        query: {
            maxwidth: 400,
            autoplay: true
        },
        display: function (data) {
            if (data.thumbnail_url) {
                element.html('<img src="' + data.thumbnail_url + '" />');
            }
        }
    }).on('click', function () {
        var data = $(this).data('embedly');
        $(this).replaceWith(data.html);

        return false;
    });
});

Answer 1

这个例子中的问题不在客户端模拟器上，而是在代码中。

embedly 将在 iscroll 初始化后加载内容，因此 iscroll 插件无法检索正确的高度。

Badly embedly 插件似乎没有回调函数（至少我没有找到它）来说明它何时完成加载内容。

所以我编辑您的脚本删除了高度集并插入手动超时以加载 iscroll。

setTimeout(function(){
  $('[data-iscroll]').each(function () {
  ...
},1000);

jsfiddle

在设备上它可以正常工作，因为他们使用普通的浏览器滚动条（因为用户使用鼠标滚动）而不是假的滚动条（至少他们使用它直到它完成滚动而不是传递给普通滚动）模拟器与触摸事件一起使用，这是浏览器模拟不能与移动浏览器相同的示例^^。