読者です 読者をやめる 読者になる 読者になる

もふぬこ動画☆画像

かわいい!おもしろい!猫動画と猫画像を毎日更新!(たまに違う記事も書いています)

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

f:id:emija:20140321175528j:plain

 

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を設定する - もふぬこ戦記

 

 

 

f:id:emija:20140321180831j:plain

 

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

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

 

 

f:id:emija:20140321181333j:plain