Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI設計におけるスマートフォン対応のまとめ

11,033 views

Published on

WebWrapのアプリを作成した際にはまったところとか、私自身こんな感じで対応したとかを発表させていただきました。

11/17 in Fukuoka
【KLab×ミクシィ・リクルートメント】 ~HTML5によるソーシャルゲームの新世界@福岡~

Published in: Technology
  • Be the first to comment

UI設計におけるスマートフォン対応のまとめ

  1. 1. UI 設計におけるスマートフォン対応のまとめ【KLab× ミクシィ・リクルートメント】 ∼ HTML5 によるソーシャルゲームの新世界@福岡∼
  2. 2. スマートフォンにおけるバグおよび問題まとめ・共通 ・Android ・iOS - イベントバブリング対応 - CSS アニメーションが遅い - position:fixed のバグ - 端末画面サイズへの対応 - text-shadow バグ - Flash の問題 - CSS3 アニメーション+box-shadow 問題 - jQuery アニメーション - scroll ができない のメモリリーク - z-index が効かなくなる - 下層レイヤーが反応する - フォントが無い - font-weight:bold が使えない - フォーカスがずれる件 - translate3d によるバグ - touchend イベントが発生しない - select や input[type=text] フォーカス時の挙動 - mask-image+アニメーション問題 - ... - 端末依存のバグ
  3. 3. スマートフォンにおけるバグおよび問題まとめ ソースコードを一元管理するには Android の設計を先に考える必要がある
  4. 4. 対応方法を簡単に共有・position:fixed への対応 現象 スクロールするとついてくる。 対策 スクロールしない様に、 コンテンツの高さを 100% に抑える様に CSS でチューニング。 もしくは、JS でスクロールをハンドリング。 環境 iOS5 以下 , Android2.2 以下
  5. 5. 対応方法を簡単に共有・z-index が効かなくなる。 現象 position:absolute の要素が z-index を無視して上にくる。 対策 オーバーレイ表示している HTML 要素に対して、 -webkit-transform:translate3d(0,0,0) を指定する。 環境 Android 4.*
  6. 6. 対応方法を簡単に共有・端末画面サイズへの対応 現象 画面サイズが機種ごとに違う 対策 zoom プロパティで画面サイズ / 基本サイズで拡大。 更に高さを適応する。 var ratio = jQuery(window).width()/640; jQuery( html ).css({ zoom : ratio, height :window.innerHeight+ px }); 環境 Android, iPhone5
  7. 7. 対応方法を簡単に共有・下層レイヤーが反応する 現象 対策 オーバーレイ表示等、上に要素を重ねると オーバーレイした際に下層レイヤーの 下にクリッカブルな要素があると反応する。 クリッカブル要素に visiblity:hidden に設定。 $(a,select,input).filter(function(i){ // 指定した親要素内は除外 if($(this).parents(ParrentNodeDom).length!=0) return false; return true; }).css({ display: none , visibility: hidden , -webkit-tap-highlight-color: rgba(0,0,0,0) , -webkit-touch-callout: none }).bind(touchstart.Canceler,function(e){ e.preventDefault(); }); 環境 Android 2.3
  8. 8. 対応方法を簡単に共有・スクロールができない 現象 対策 overflow:auto が効かないので、 flickable や flicksimple などを使い スクロールができません。 フリック要素を形成する必要がある。 中にイメージがある場合には、 イメージをプリロードしてから実装する必要がある。 オーバーレイの中では、非表示だと高さがとれないので、 表示されてから再設定する。 環境 Android2.3
  9. 9. 対応方法を簡単に共有・イベント感染問題 現象 対策 オーバーレイ表示時等にタップイベントが オーバレイ非表示時にはオーバーレイのリンク要素に 上層レイヤーにまで渡ってしまう。 e.preventDefault(); e.stopPropagation(); を設定。表示する関数のコールバックで解除する。 if(arguments[0]){ $(*,arguments[1]).bind(click.pre,function(e){ event.stopPropagation(); event.preventDefault(); if(window.event) window.event.cancelBubble = true; }).bind(touchend.pre,function(e){ event.stopPropagation(); event.preventDefault(); if(window.event) window.event.cancelBubble = true; }); }else{ $(*,arguments[1]).unbind(click.pre).unbind(touchend.pre); }
  10. 10. 感想・Android への対応がかなり工数を取られる・スマートフォン対応は Android から対応策を検討すべき

×