如何处理特定设备的花式框或对话框宽度？答案

【问题标题】：how to handle fancybox or dialogbox width to device specific?如何处理特定设备的花式框或对话框宽度？
【发布时间】：2013-12-18 21:45:33
【问题描述】：

我的应用程序中的 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>

【问题讨论】：

标签： jquery css jquery-ui twitter-bootstrap fancybox

【解决方案1】：

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

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

【讨论】：

如何使用媒体查询。它会自动照顾它吗？需要做点什么

【解决方案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

【讨论】：