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を設定する - もふぬこ戦記
画像が切れずに表示されました!
上記の画像はシミュレータなのでフォローボタンが切れていますが実機では表示されています。