別タブでペリアクロニクルズ攻略情報を開く別タブでYoutubeを開く
【日記】スマホではインラインフレーム(iframe)がはみ出てしまう問題の解決法
ifarmeはみ出し
iPhoneで僕のブログのPCページを表示したら、こんな事になっていました。原因は
スマートフォンはインラインフレームのスクロールに関係する処理がおかしい事らしい。

少し調べた結果対処法として考えられるのは
・スマートフォンを識別して飛び出ないようにする
・スマートフォンではiframeのスクロールが使いにくいらしいので、スマホでは非表示にしてしまう
・iframeを使わずに似たような物を使う


このあたり。
スマートフォンを識別してそれぞれ別のCSSで処理するって方法は、たぶん面倒なのでパス。
二番目のスマートフォンだと認識したら隠してしまうのはできると思うんですが、最終手段として後回し。
今回試して上手くいったのは3番目の擬似インラインフレーム。

このサイトに書かれている物を拝借して無駄な物を消してみた。



<!--▼スマホのiframeバグ対処用-->
<style type="text/css">
  *.iframebox
  {
    border: solid 1px #808080;
    width: 横幅px;
    height: 縦幅px;
    overflow: auto;
  }
  q { color: #008000; }
</style>
<!--▲ここまで-->

まずはこれの縦、横幅を書き換えて<head>~</head>の間に入れる。

<div class="iframebox">
<p>ここに文章を入れます</p>
</div>
あとはiframeを入れていた場所へこれをシュートすれば


ここに文章を入れます












こんな風になります。
文章を入れるのではなく、RSSリーダーをぽいっと入れれば…


ifarmeはみ出し解決
こんな感じに解決しました。
元の物に比べて字が小さい、中央寄せになっている等変わっている点がありますが…
それは今回の件とは関係の無い変更した部分の影響なので気にする必要は無いはず。

変更したメリットとしては一本指でのスクロールが可能になりました。
字が小さいのも実際にスマホで確認したら問題無いレベルで、


追記
やっぱり少し文字が小さかったのでRSSの文字サイズを12→15pxに。


中央寄せにしたら少しかわいい感じがしたので もうこれでいいかな…って感じですね
正直この記事が誰かの役に立つ気がしませんが、何かの参考になれば嬉しいです

参考:スマホを認識して別のCSSで処理する
関連記事

 

コメントの投稿

Secret
(非公開コメント受付不可)

コメント

プロフィール
Twitter.pngRSS.png

HN:まいける、とーげ、雪月 等
性別:男
────現在のゲーム優先順位(11/09)──
デレステ(PRP1104 フルコン82/87)
グラブル(Rank63)
──────────────────
現在開発中のMMORPG
ペリアクロニクルズが来るまで
パズドラやSteamで暇つぶし中。

最近の記事
こめんと
ツリーリンク
アクセスありがとう
密林おすすめ