javascript - Turn.js 基于窗口宽度的显示选项

Question

我正在尝试使用turn.js 制作一本翻页书，这非常棒。我遇到的唯一问题是我试图使其在手机中为单页显示，在桌面上为双页显示。在 JavaScript 中创建活页簿时，它确实可以选择显示:'单'或显示:'双'

当您调整窗口大小时，我设法实现了更改，但使用了 onresize jwuery 事件，但这使得它仅在您调整窗口大小时才会触发，但如果不这样做，它总是双页......所以当浏览器呈现时移动设备的页面是默认的双页而不是单页

让我在这里发布我的代码 //创建活页簿

flipbook.turn({

        // Magazine width

        width: 922,

        // Magazine height

        height: 600,

        // Duration in millisecond

        duration: 1000,

        // Enables gradients

        gradients: true,

        // Auto center this flipbook

        autoCenter: true,

        // Elevation from the edge of the flipbook when turning a page

        elevation: 50,

        // The number of pages

        pages: 12,


        // Events

        when: {
            turning: function(event, page, view) {

                var book = $(this),
                currentPage = book.turn('page'),
                pages = book.turn('pages');

                // Update the current URI

                Hash.go('page/' + page).update();

                // Show and hide navigation buttons

                disableControls(page);

            },

            turned: function(event, page, view) {

                disableControls(page);

                $(this).turn('center');

                $('#slider').slider('value', getViewNumber($(this), page));

                if (page==1) {
                    $(this).turn('peel', 'br');
                }

            },

            missing: function (event, pages) {

                // Add pages that aren't in the magazine

                for (var i = 0; i < pages.length; i++)
                    addPage(pages[i], $(this));

            }
        }

});
    //change from single to double page
      $(window).resize(function(){
         var win = $(this); //this = window
         if (win.width() >= 820) { flipbook.turn('display','double');}
         else {
           flipbook.turn('display','single');
         }
   });

我希望有人能帮我解决这个问题

Answer 1

要使翻页书响应移动设备，您可以添加以下代码，该代码检查导航器的用户代理是否是移动设备。

function checkMobile() {
 return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
}

然后在窗口函数的大小调整中使用它。

if (!checkMobile()) { // not mobile
 $('.flipbook').turn('display', 'double');
}
else {
 $('.flipbook').turn('display', 'single');
}

初始化动画书后，您可以使用上面的代码片段来动态设置动画书的显示(双屏、单屏)。