Web管理者が知っておくべきスマートフォンブラウザの問題点

タイトルはえらそうに書きましたが、
自分はiphone以外のその他のスマフォは持っていないので、すべてで確認することはできませんが、ほかのスマフォもその多くがappleのwebkitと呼ばれる技術を採用していることから見て、おそらくiphoneのsafariと基本は同じと思います。

またあくまでスマフォ用のサイトではなく、
PCサイトを見た場合の問題点などを書いていきます。
基本的にはPC版のsafariとほぼ同じなのですが、
若干の違いがあります。

また、こんな回避法があるよ～や間違い等ありましたらコメントください。

インラインフレームが非対応。というかスクロールバーが非対応。
これは知らなかった。。。
実際インラインフレーム内の内容は表示されます。スクロールバーが表示されず、内容すべてが縦に表示されます。それがその下にあるコンテンツの背景側に表示されてしまいます。ここが大問題になることも！
インラインフレームの下にリンクなどがあると、そのリンクがクリックできない。
おそらくインラインフレーム内のコンテンツを認識してしまうためと思われます。

回避策
iframeをdiv等で囲み、高さを指定しoverflow:hiddenではみ出す分を非表示にすればOK

また、overflow:autoなどを設定してもスクロールバーが表示されないので、スクロールしないと見れない部分は閲覧困難（2本指でフリックすればスクロールできるが論外）なので、代替手段を考えないとだね。JQueryなどでスライドとか。
　

Javascriptでwindow.openを設定すると新規ウインドウ（blank）で表示される。
ポップアップはしてくれません。
まぁそこまで致命的ではないので無視でもいいかと・・・。lightboxやmultiboxなどは対応しているもよう。ただ次の画像へのリンクの箇所が小さくうまく押せない・・・ので、新規ウインドウで見せたほうが自分は見やすいと感じた。
フォームのinput type=”file”が非対応なためフォームから画像等のファイルをあっぷすることができない。
これはひどいな・・・・。回避策
現在調査中・・・おそらくメールで添付させるやり方しかないかな・・・。

随時更新予定

記事の内容が近いもの: