タグ: Responsive

lightbox系のヤツでレスポンシブでもなんとかしたい

lightbox系の画像拡大のコンテンツがあるのをレスポンシブ的な感じでやった時、

最初、Lightbox 2で試してみたけど、

かなり大きなサイズの画像だと、スマートフォンのブラウザいっぱいいっぱいになって、どうしようもなかった。
色々試した結果、軽さもあって、ColorBoxがいいかなと。NETEYE Touch-Galleryは、なんかバギーな印象で今回は見送った。ColorBoxもSettingsがデフォルトのままだと、Lightbox2のデフォルト同様いっぱいいっぱいになってあわわ状態ColorBoxのSettings見て、

        $('#hoge').colorbox({maxWidth: '98%'});
    

とかでもスクロールはするんだけど、やはり大きい。うーむ。デベロッパーツールと格闘しながら、colorbox.cssの.cboxPhotoの

        max-width:none;
    

        max-width: 98%;
    

とかにしたら、だいたい希望通りになった。あとは微調整して。ターゲットブラウザでの動作とかちゃんと調べてご利用は計画的に。

PHPでスマートフォンとかを振り分け

レスポンシブでなんとかしたい場合とか用でメモUAで振り分けてパーツをゴニョゴニョしたかったのでどういう解像度でどんな風に見せるか、@mediaとかと相談しながら、下記のページとか眺めて妥協点を探りながら

function is_mobile() {
    $ua = array(
        'iPhone',
        'iPod',
        'Android',
        'Windows Phone',
        'blackberry',
        'DoCoMo',
        'KDDI',
        'SoftBank',
        とかお好みで
    );
    $pattern = '/'.implode('|', $ua).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}