如何處理fancybox或對話框寬度到設備特定？

fancybox在我的應用程序中打開更大的尺寸。我將fancybox的寬度指定爲700px，但同時我不希望在移動設備或任何較小的設備上將fancybox顯示爲700px。如何處理fancybox或對話框寬度到設備特定？

有反正我們可以處理這個嗎？

$.fancybox.open({ 
      href: '/ContactSubmission/', 
      type: 'ajax', 
      padding: 0, 
      openEffect: 'fade', 
      openSpeed: 'normal', 
      closeEffect: 'elastic', 
      closeSpeed: 'slow', 
      minWidth: 'auto', // can set to 700px 
      minHeight: 'auto', 
      helpers: { 
       title: { 
        type: 'float' 
       } 
      } 
     });

想要移除突出顯示的紅色區域。

enter image description here

<div class="row"> 
    <div class="col-md-7 col-md-offset-1"> 
     <div class="panel panel-default"> 
      ----- 
      --- 
     </div> 
    </div> 
</div>

來源

2013-12-18 James123

我想你應該嘗試的百分比，而不是像素像width: 70%和看到的結果，如果你想更清楚，你可以使用媒體查詢，如：

@media screen and (max-width: 320px) { 
    // make things smaller 
}

來源

2013-12-18 21:58:44

如何使用媒體查詢。它會自動處理它嗎？需要做點什麼 – James123

您可以創建一個變量並根據window大小（寬度）設置其值，如

var $width = 700; 
// for window smaller than 800px (or else) 
if ($(window).width() < 860){ 
    $width = "80%" // or whatever for small devices 
}

然後設置minWidth該變量

$.fancybox.open({ 
    // API options 
    minWidth: $width, // can set to 700px 
    ...etc 
});

這正常http://jsfiddle.net/wVuZ4/將顯示與小尺寸的fancybox，而這http://jsfiddle.net/wVuZ4/show（全屏）將顯示它700個像素

來源

2013-12-19 02:50:21 JFK

如何處理fancybox或對話框寬度到設備特定？

回答

相關問題