Question

当用户第一次访问该页面时，我正在使用彩色框（使用cookie）。该框包含520x520图像。我的css如下：

#hunger-count{
padding: 5px;
overflow: hidden;
}

#hunger-count img{
width: 100%;
height: auto;
}

函数调用：

if (visited == null) {
        $.cookie('visited', 'yes'); 
        $.colorbox.settings.height = 560;
        $.colorbox.settings.width = 520;
        $.colorbox({html:"<div>...</div>"});
}

我希望那些是maxWidth＆amp; maxHeight，并将宽度设置为屏幕的80％左右。这里的问题是，根据我设置的高度百分比，图像在不同的设备上变得有趣。我有一部华为安卓手机，当我在手机上设置好高度和宽度比时，它在iPhone上看起来很有趣，反之亦然。设置80％的宽度和自动高度得出相同的结果。

关于我如何做到这一点的任何建议？

Answer 1

为什么不使用：

$.colorbox({html:"<div>...</div>", width: '100%' });

适合屏幕？

Answer 2

您可以设置颜色框参数

innerWidth:'80%', innerHeight:'80%'

如果您使用colorbox作为iframe。

Answer 3

我开发了一个小东西，对我来说可以让我的iFrame在彩盒视频中保持16/9的比例。我从Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)获取了一个函数来获取视口尺寸并使用它们来计算我的颜色框尺寸。我选择仅在页面加载时进行此计算，而不是在页面调整大小上。如果你不希望它大于520px宽那么可能有一个情况，如果视口宽于520，做520宽度，如果它小于520，做80％的视口宽度然后使高度为相同。查看下面的代码示例：

function getViewport() {
    var viewPortWidth;
    var viewPortHeight;
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    if (typeof window.innerWidth != 'undefined') {
      viewPortWidth = window.innerWidth,
      viewPortHeight = window.innerHeight
    }
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0) {
        viewPortWidth = document.documentElement.clientWidth,
        viewPortHeight = document.documentElement.clientHeight
    }
    // older versions of IE
    else {
        viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
        viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
    }
    return [viewPortWidth, viewPortHeight];
}    
var viewPortDim = getViewport();
var viewPortWidth = viewPortDim[0];
var viewPortHeight = viewPortDim[1];

//colorbox init
var colorboxWidth = 520;
if (viewPortWidth < 520) {
    colorboxWidth = viewPortWidth * 0.8;
}
//now initialize colorbox in your square ratio (your image is 520x520)
$('a.lightboxVid').colorbox({
    iframe: true, 
    innerWidth: colorboxWidth, 
    innerHeight: colorboxWidth
});

调整颜色框大小以适应屏幕宽度

3 个答案: