スマートフォン・タブレットでもEmbedをキレイに見せる
SlideShare, Speaker Deck等にアップされているスライドをブログに埋め込む（embed）際、訪問者が読みやすいよう表示サイズを大きめにしています。閲覧者のデバイスがPCであれば、特に問題ないのですが、スマートフォンやタブレットであった場合、記事の表示領域によっては、横スクロールがでてしまい、不格好になってしまいます。
1 | <iframe src="http://www.slideshare.net/slideshow/embed_code/13751707" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/mawatarin/fuelphp-fukuokaphpvol2" title="最近、僕がハマったFuelPHPの紹介" target="_blank">最近、僕がハマったFuelPHPの紹介</a> </strong> from <strong><a href="http://www.slideshare.net/mawatarin" target="_blank">Naoto Mawatari</a></strong> </div> |
例えば、僕の環境（WordPress, Themify Basic theme）では、以下のような感じで書いておけば、閲覧者のデバイスが、スマートフォンやタブレットであっても、不要な横スクロールは表示されません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* iPhone */ @media only screen and (max-device-width: 480px) { iframe { width: 300px; height: 226px; } } /* iPad */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { iframe { width: 480px; height: 361px; } } |
iframeを作らないタイプのembedであれば、IDセレクタや、classセレクタを指定すればよいと思います。