twitterのウィジェットがiOSではみ出る場合の対処法

仕様かバグかはわからないのですが、twitterのウィジェットがiOSではみ出る現象にぶつかりました。
で、その現象が発生するのは特定のユーザのウィジェットのみという、わけがわからない…。

例えばこういうケース。


< a class="twitter-timeline" href="https://twitter.com/testUser">
Tweets by testUser
< /a>

cssをこんな感じで書けば良いと思っていたんですが。

#twitter
{
// 適当な値
width: 320px;
}

#twitter iframe
{
width: 100%;
}
これだと、iOSではみ出るケースがあります。

上の例だとiframeに"320px"を設定してあげれば問題ないのですが。
実際には幅を動的に設定する場合が多いと思いますので、iframeはパーセンテージで指定してあげたいですよね。

で、CSSだけだとどうしてもうまいこと書けなかったので、結果的にJSに頼ってみました。

function setWidget()
{
if (($('#twitter iframe').length > 0)
{
if ($('#twitter iframe').width() > 0 && $('#twitter iframe').height() > 0)
{
$('#twitter iframe').css
({
'cssText': 'width: ' + $('#twitter').width() + 'px !important;'
});
}
else
{
setTimeout(setWidget, 500);
}
}
else
{
setTimeout(setWidget, 500);
}
}
結構適当ですが、意外とコーディングには手間取りました。

というのも、iframeは動的に生成されますが、iframeの生成とwidthの設定がずれてるっぽくて…。
また、cssは!importantを設定してあげないと、iframeデフォルトの値が優先されることがありました。

現象自体は結構レアケースだと思いますが、参考までに。

コメント

非公開コメント