Twitter引用時、iPhoneで参照すると画像が切れる件

Twitterを引用すると画像が半分くらい切れてしまう問題があります。（上図のようになります）

以前から気になっていたのですが「僕のiPhoneが古いせいで、iPhone5や5Sでは正しく表示されるのかな」と考えることにしたのですが、後輩のiPhone5Sで確認してもらったところ、やはり画像が切れてしまいました。

何が原因なのか調べてみたところ、

http://hatenablog.com/css/touch/blog-touch.css

というCSSの中にある

iframe {

 width: 100%

がどうやら悪影響を与えているようです。

そこで、「Headerに要素を追加」からメディアクエリ（@media only screen and ～）を使用してiPhoneのように画面幅が小さい場合にはiframeのwidthを上書きすることにしました。

【記述例】

<style>

@media only screen and (max-width: 320px) {

iframe {

  width: 300px;

}

}

</style>

※Headerに要素を追加については以下の記事をご覧ください

はてなブログのスマートフォン用CSSを設定する - もふぬこ戦記

画像が切れずに表示されました！

上記の画像はシミュレータなのでフォローボタンが切れていますが実機では表示されています。