調整colorbox的大小以適合屏幕寬度

我在用戶第一次訪問該頁面（使用cookie）時使用colorbox打開。該框包含一個520x520圖像。我的CSS如下：調整colorbox的大小以適合屏幕寬度

#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 & maxHeight，並設置一個寬度是屏幕的約80％。這裏的問題是，根據我設置的高度百分比，圖像在不同的設備上變得有趣。我有一個華爲Android手機，當我在手機上設置好高寬比時，它在iPhone上看起來很有趣，反之亦然。設置80％寬度和自動高度的結果相同。

有關我如何做到這一點的任何建議？

來源

2012-10-26 user1380540

爲什麼你不使用：

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

，以適應屏幕？

來源

2012-10-26 15:15:36 webdeveloper

當我只設置一個寬度時，colorbox調整爲該寬度並將高度設置爲10px。將高度設置爲自動也不起作用。客戶最終決定他們不希望彈出窗口出現在移動設備上，所以我只是最終把移動檢測條件放在了整個事情上。但是如果有人找到解決這個問題的方法，我會很有興趣瞭解一下！否則，我可能會建議找一些反應燈箱來代替。 – user1380540

您可以如果您正在使用顏色框作爲一個iframe顏色框設置parametters

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

。

來源

2014-04-23 11:25:39

我開發了一個小工具，用於保持我的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 
});

來源

2014-10-14 14:00:54

調整colorbox的大小以適合屏幕寬度

回答

相關問題