本サイトのコンテンツには、商品プロモーションが含まれている場合があります。

未分類

スマートフォンでのiframeを使うときに気にしておくこと

スポンサーリンク

iframeをandroidとiPhoneで表示した場合の相違点

■android

iframe の表示される
スクロールはできない

■iPhone

ifameの表示される
2本指でスクロールする


スポンサードリンク


iPhoneを常時使用しているユーザーでも、2本指でスクロールすることは
まずないでしょう。
使うとしたら、必ず注意書きを入れないとまずそうです。

総合すると、iframeは使えないですね…
見せ方として同様なdivタグを固定幅にして、overflow:scrollを付け加えるやり方があります。

divタグにoverflowをつける

[code language="html"]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.overbox{
width:200px;
height:200px;
overflow:scroll;
}

</style>
</head>

<body>

<div class="overbox">
overflowさせるよ<br />
overflowさせるよ<br />
overflowさせるよ<br />
overflowさせるよ<br />
overflowさせるよ<br />
overflowさせるよ<br />
overflowさせるよ<br />
overflowさせるよ<br />
</div>
</body>
</html>

[/code]

もiframeと同様の現象です。
狭い画面内でどうレイアウトするか、難しいところです。

検証機

Xpreria,iPhone4

参照URL

メモ: iPad(iPhone)の困った仕様

-未分類
-,