cssとjquery
WEBデザインド素人です。
とんちんかんな質問だったらごめんなさい。
単刀直入に質問させていただきます。
div#likebox_container .fbcomments,
div#likebox_container .fb_iframe_widget,
div#likebox_container .fb_iframe_widget[style],
div#likebox_container .fb_iframe_widget iframe[style],
div#likebox_container .fbcomments iframe[style],
div#likebox_container .fb_iframe_widget span{
width: 100% !important;
}
以上のように一括設定したスタイルを、jquery にて、状況に応じて width の設定を替えられないものだろうか、、、と悪戦苦闘中でございます。
ピンと来た方もいらっしゃるかもしれませんが、とあるHTMLページに、自分のfacebookのタイムラインと『いいね！』を配置し、その横幅をレスポンシブにしようとした場合の設定方法（有名？）とのことでした。
確かに、上記スタイルを追加すると、気持ちいいくらい横幅がレスポンシブになってくれますが、ただ１点だけ気になることがあり、iphone5(width=320px)で表示した場合のみ、右側に変な余白が出来てしまいます。
（横幅が320px以上のandroidだと大丈夫とのことで、どうやらタイムライン表示部の横幅が292pxで、加えて両サイドのpadding？margin？が邪魔してズレテしまう、、、みたいです。 それはさておき、、、）
これを何とかしようと、２日ググってみましたが解決せず、じゃ最後の砦のjqueryで何とかしたいなと、そこでも色々調べてみましたが、上手く行かず、でした。
width: 100% !important
の部分を、iphone 判定の場合のみ
width: 320px
に変更できないのでしょうか？
$("div#likebox_container .fbcomments").css("width","320px");
$("div#likebox_container .fb_iframe_widget").css("width","320px");
$("div#likebox_container .fb_iframe_widget[style]").css("width","320px");
$("div#likebox_container .fb_iframe_widget iframe[style]").css("width","320px");
$("div#likebox_container .fbcomments iframe[style]").css("width","320px");
$("div#likebox_container .fb_iframe_widget span").css("width","320px");
と動かしてみましたが、どうも上手く行きませんでした。というより無反応。。。
query にこだわってるわけではありませんが、そのCSSスクリプト内の数値をパラメータ化して可変にできるのなら、それでも良いのですが、、、聞いたことないので、どうしたものかと考えております。
何か妙案お持ちの方、あるいは小生の愚問を一蹴・叱責して頂ける方いらっしゃいましたら、ご教示頂けると幸いです。
よろしくお願いいたします。
※ 上記ソース内のブランク部には、分かりやすいようにと、全角スペースを使用しております。
お礼
解決しました。 ありがとうございました！！