こんにちはLatinです。みなさん夏休みの予定はもう決まりましたか? LCC全盛という事で、沖縄などの国内のリゾート地にも随分と安い金額で行けるようになりましたよね。沖縄行きて~! さて、今回はスマホサイト制作のTipsです。 スマホサイトの制作時、 Facebook や Twitter のウィジェットを埋め込む事も多いかと思います。 フレームの横幅が固定であれば事はそれほど重大ではないのですが、レスポンシブ対応や Landscape 時に横幅を引き延ばす必要がある場合、iPhone だと iframe の幅指定「width: 100% !important;」が効かず、「横幅がはみ出てしまう」という事態によく陥ります。この時の対処法をまとめていきます。 まずは最初のHTMLとCSS HTML <div class="box"> <h1>Twitter ウィジェット</h1> <div c
![【CSS】iPhone で iframe の横幅がハミ出してしまう問題の解決法 | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/5f235dffcc2c48f8ec5089e8755ae99791835e48/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2F20140723-latin-01.png)