Javascript 基于窗口宽度的turn.js显示选项

我正在尝试用turn.js制作一本动画书，这真是太棒了。 我唯一的问题是，我试图使它在mobies中是单页显示，而在桌面上是双页显示。 在用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');
         }
   });

flipbook.turn({
//刀库宽度
宽度：922，
//弹匣高度
身高：600，
//持续时间（毫秒）
持续时间：1000，
//启用渐变
梯度：对，
//“动画书”自动居中
自动中心：对，
//翻页时距动画书边缘的高程
标高：50，
//页数
页数：12，
//事件
当：{
翻转：功能（事件、页面、视图）{
var帐簿=$（本），
currentPage=book.turn（'page'），
页数=书本翻页（“页数”）；
//更新当前URI
Hash.go（'page/'+page）.update（）；
//显示和隐藏导航按钮
禁用控件（第页）；
},
打开：功能（事件、页面、视图）{
禁用控件（第页）；
$（此）。旋转（'中心'）；
$（'#slider'）。slider（'value'，getViewNumber（$（此），页））；
如果（第==1页）{
$（this.turn（'peel'，'br'）；
}
},
缺少：函数（事件、页面）{
//添加不在杂志中的页面
对于（变量i=0；i=820）{flipbook.turn（'display'，'double'）；}
否则{
动画书。翻转（“显示”、“单个”）；
}
});

---

我希望有人能帮我解决这个问题，所以大家好，我设法解决了这个问题

我改变了最后的代码部分

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

到那

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

---

它在刷新页面和调整窗口大小时都可以正常工作。我不知道这是否是正确的方法，但它似乎工作得非常好

要使“动画书”响应移动，您可以添加以下代码，检查导航器的用户代理是否是移动的

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

然后将其用于调整窗口函数的大小

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

---

初始化“动画书”后，您可以使用上述片段动态设置“动画书”的显示（双屏幕、单屏幕）。

对于移动屏幕，您必须更改屏幕宽度 下面是经过测试和运行的代码

if(window.innerWidth<768 && window.innerWidth >= 320) {
           $('#flipbook').turn({
            width:430,
            height:650,
            elevation:50,
            inclination:50,
            display: 'single',
            autocenter:true,
            acceleration: true,
            gradients:true,
            zoom:2,// you can change it as you desire
               duration:50,
          });
         }

if（window.innerWidth=320）{
$（“#动画书”）。翻({
宽度：430，
身高：650，
标高：50，
倾向：50，
显示：“单个”，
自动中心：对，
加速度：是的，
梯度：对，
zoom:2，//您可以根据需要更改它
持续时间：50，
});
}

以下是我在手机屏幕上的工作方式：

    $('#flipbook').turn({
                        display: 'single',
                        acceleration: true,
                        gradients: true,
                        elevation:50,
                        when: {
                            turned: function(e, page) {
                                console.log('Current view: ', $(this).turn('view'));
                            }
                        }
                    });

---

我需要的是浏览器在构建动画书之前检查视口大小，然后将“显示”选项设置为单或双。有没有办法在动画书中调用if语句。turn这对我不起作用。它在手机上仍然显示double。知道为什么吗？