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

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

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

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

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

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

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

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

随時更新予定

記事の内容が近いもの:

  1. javascript使用したスマートフォンの判定(判別)
  2. phpでスマートフォンの判別(判定)
  3. iPhone良いとこ悪いとこ(あくまで主観)そしてSDで電話帳移行
  4. jQueryMobileで作るスマートフォンサイトのHelloWorld
  5. スマフォサイトをPCで表示確認するためのブラウザ
  6. スマートフォン(スマホ)Androidでのmp4再生のための作業録

カテゴリー: スマートフォン   パーマリンク

コメントは受け付けていません。