如何处理特定于设备的fancybox或对话框宽度？

Question

我的应用程序中的fancybox以更大的尺寸打开。我将fancybox宽度指定为700px，但在同一时间我不希望在移动设备或任何较小的设备中将fancybox显示为700px。

我们还能处理吗？

 $.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'
                }
            }
        });

想要删除红色突出显示的区域。

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

Answer 1

我认为您应该尝试使用百分比而不是像width: 70%这样的像素，并查看结果，如果您想更清楚地说明您可以使用以下媒体查询：

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

Answer 2

您可以创建变量并根据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（全屏）将显示700px