0

ユーザーが最初にページにアクセスしたときに開くためにカラーボックスを使用しています（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とmaxHeightにし、幅を画面の約80％に設定します。ここでの問題は、設定した高さのパーセンテージに応じて、さまざまなデバイスで画像がおかしくなることです。私はHuaweiAndroidスマートフォンを持っていますが、スマートフォンで高さと幅の比率を適切に設定すると、iPhoneで見た目がおかしくなり、その逆も同様です。80％の幅と自動の高さを設定しても同じ結果になりました。

これをどのように行うことができるかについての提案はありますか？

4

3 に答える 3

2

使用しない理由：

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

画面に合わせるには？

于 2012-10-26T15:15:36.730 に答える
0

カラーボックス ビデオの iFrame を 16/9 の比率に維持するためのちょっとした機能を開発しました。ビューポートの寸法を取得し、それらを使用してカラーボックスの寸法を計算するために、クロスブラウザの方法でビューポートの正確な高さと幅を見つける (プロトタイプ/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-14T14:00:54.097 に答える