Question

我需要100％的移动设备宽度，90％的宽度用于更大的屏幕。我确实调整了通用脚本并且它正在工作，但我知道它看起来像一个troglodyte脚本：

           if (windowWidth > 480) {
              $(".fancybox").fancybox({
                  openEffect  : 'none',
                  closeEffect : 'none',
                  iframe : {
                      preload: false
                  },
                  padding: 0,
                  width : '90%',
                  height : '90%',
                  helpers : {
                    overlay : {
                        css : {
                            'background' : 'rgba(0, 0, 0, 0.65)'
                        }
                    }
                  }
              });
          }else{
              $(".fancybox").fancybox({
                  openEffect  : 'none',
                  closeEffect : 'none',
                  iframe : {
                      preload: false
                  },
                  padding: 0,
                  width : '100%',
                  height : '90%',
                  helpers : {
                    overlay : {
                        css : {
                            'background' : 'rgba(0, 0, 0, 0.65)'
                        }
                    }
                  }
              });
        }

所以，我想知道如何分割宽度和高度以避免重复＆＃34;定义

Answer 1

只需将条件语句放在fancybox afterLoad回调中，如：

afterLoad: function () {
    if (window.innerWidth > 480) {
        this.width = '90%'; // or whatever
        this.height = '90%';
    } else {
        this.width = '100%';
        this.height = '90%';
    }
}

请注意，为了获得自定义尺寸，您可能需要将fitToView选项设置为false。您可能还需要调整fancybox边距。

参见 JSFIDDLE

Fancybox：不同的宽度百分比 - 更清晰的脚本？

1 个答案: