スマートフォンブラウザ不具合特集          若松 浩昭(株式会社ジークス)
自己紹介若松 浩昭(Hiroaki Wakamatsu)                      iPhone 3G・Webサイトの設計・フロントエンド周りの実装                           003SH・スマートフォン...
セッションのテーマ  不具合をうまく回避して、   案件を成功に導こう!!                 3
セッションの内容1. スマートフォン案件の現状2. 不具合を回避するための事前準備3. 代表的な不具合とその回避方法4. その他、気をつけていること5. 最後に・・・                     4
Chapter. 1スマートフォン案件の現状               5
日本におけるスマートフォン                6
案件の多くは・・・            7
苦労するのがAndroid対応•Android OS のバージョン•端末の解像度•ブラウザ•機種に依存する不具合                     8
Chapter. 2不具合を回避するための事前準備                  9
これだけはしておこう:対クライアント編•Webで実現可能な表現・機能の説明•iPhone Androidの説明•Androidの機種依存問題の説明•案件で対応する範囲を明確に                      10
•Android 2.2以下も動作対象?•標準ブラウザ以外のブラウザは?•動作検証(担保)の対象となる機種は?                       11
これだけはしておこう:クリエイター編•とにかくノウハウが大事。日頃から不具合等の情報収集に励む•要件に対しては事前に必ず検証•検証端末の確保(できれば複数台)                     12
Chapter. 3代表的な不具合と回避方法               13
・・・の前に、不具合に対応するための準備•UserAgentによる判別処理var ua = navigator.userAgent;var isIphone = /iphone/.test(ua);var isAndroid = /androi...
Case. 1太字•標準フォントの「Droid Sans  Japanese」は、全角文字には非対応•機種によっては、太字に完全対応したオリジ  ナルフォントがインストールされている    SAMSUNG製Android端末   Sharp製A...
Case. 1太字     ー 回避方法の例 ー•text-shadow を使って太字を再現   (機種別で分けるのは・・・さすがにしんどい)   E{     font-weight: bold;   }   .android E {    ...
Case. 2リンク要素のアウトライン•ブロック要素のアウトライン反応がおかしい   <a href="リンク先URL">リンクのタイトル</a>   a { display: block; } /* aをブロック要素としてレンダリング */ ...
Case. 2リンク要素のアウトライン                ー 回避方法の例 ー•aタグの直下にdivタグを挿入  (pタグや、display:block; にしたspanタグはNG)   <a href="リンク先URL"><div...
Case. 3translate3d•translate3d実行後のレンダリングに崩れ   リンク要素のアウトライン、transform系プロパティ、   各種インプット系要素 ...                              ...
Case. 3translate3d•translate3dと同時に指定した、その他の  transform系プロパティが反映されない          iPhone4   IS05                            20
Case. 3translate3d•translate3dを実行した要素内では、  インプット系要素が不可思議な動き                  デモURL :                  goo.gl/8oNXZ        ...
Case. 3translate3d          ー 回避方法の例 ー•Androidではtranslate3dを使用しない   E{     transition: all 0.75s ease-out;     transform: ...
Case. 4オーバーレイ•下層レイヤーのクリック要素(プルダウン含  む)が反応              Case 1                       23
Case. 4オーバーレイ•条件によっては、オーバーレイ上の要素が  操作できなくなる可能性も・・・          Case 2   Case 3   Case 4                                     24
Case. 4オーバーレイ               ー 回避方法の例 ー 方法1:ハイライトカラーを透明化  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   Case 1          ...
Case. 4オーバーレイ               ー 回避方法の例 ー 方法2:タップ時のイベントをキャンセル  $("E").on("touchstart", function(e) {     e.preventDefault(); ...
Case. 4オーバーレイ                  ー 回避方法の例 ー 方法3:クリック(プルダウン)要素を非表示  visibility: hidden;   Case 1                Case 2      C...
Case. 5固定配置 iOSなら5以上、Android OSなら2.2以上 で、position: fixed; が使用可能                              28
Case. 5固定配置•iOS4でも対応するなら、ライブラリの使用  を推奨               iScroll4               http://cubiq.org/iscroll-4                    ...
Case. 5固定配置•Androidでは、iScroll等のライブラリは動  作が不安定•position: fixed; を使用する場合は、  viewportに user-scalable=no の指定が  必須(Android4は除く) ...
Case. 5固定配置•Galaxy S Ⅱなどの一部の機種では、  position: fixed; がうまく動かない                             31
Case. 5固定配置      ー 回避方法の例 ー•スクロール途中は固定配置の要素を  非表示にする等、調整を入れる                       デモURL :                       goo.gl/jL...
Case. 6text-shadow•必ずぼかしの設定値は1px以上にする  (Android4は除く)  text-shadow: 0 0 1px rgba(0, 0, 0, 0.75);                           ...
Case. 6text-shadow•Galaxy Nexusでは、特定の文字で文字飛  びが発生するので、text-shadowは無効に  if (/Galaxy Nexus/.test(navigator.userAgent)) {    ...
Case. 7拡大と縮小•3種類のアクション   ピンチイン・アウト   ダブルタップ   拡大・縮小ボタン                                   35
Case. 7拡大と縮小•2種類の拡大結果          全体がそのまま拡大   画面幅に合わせて改行                                   36
Case. 7拡大と縮小•拡大(縮小)時のアクションと結果は、  機種によって違う場合がある   例)   Xperia acro:   → ピンチアウト ... 全体がそのまま拡大   → ダブルタップ/拡大アイコン ... 画面幅に合わせて...
Chapter. 4その他、気をつけていること                38
Point. 1スワイプ系のライブラリの選定•選定する時は「Androidでも動くか?」を  基準にする                          39
Point. 1スワイプ系のライブラリの選定•flickSimple  イトーヨーカドー、スターバックス、セブンイレブン•flipsnap  JRおでかけネット、ドミノピザ、UNO(資生堂)•flickslide  海遊館、ミスタードーナツ、モスバー...
Point. 2フォーム系のスタイルを調整•テキストフィールドの調整•プルダウンの高さ調整           input {              padding: 8px 5px;           }           selec...
Point. 2フォーム系のスタイルを調整•チェックボックスやラジオボタンのサイズ調  整と、labelタグへのイベント登録            <label onclick="">               <input type="ch...
Chapter. 5   最後に・・・             43
最後に・・・•スマートフォン案件は、Androidの不具合をどれだけうまく回避できるかが鍵•Androidに関しては、   格好いい 動きの実装は避けた方が幸せ•HTML5のAPIを使用する際は、特に入念な検証が必要              ...
スマートフォンブラウザ不具合特集        若松 浩昭(株式会社ジークス)                 @azuyuu
Upcoming SlideShare
Loading in...5
×

スマートフォンブラウザ不具合特集

115,228

Published on

CSS Nite in OSAKA, Vol.29 で発表したスライドです。改訂版を http://www.slideshare.net/HiroakiWakamatsu/ss-14011485 にアップしました。

2 Comments
207 Likes
Statistics
Notes
No Downloads
Views
Total Views
115,228
On Slideshare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
409
Comments
2
Likes
207
Embeds 0
No embeds

No notes for slide

スマートフォンブラウザ不具合特集

  1. 1. スマートフォンブラウザ不具合特集 若松 浩昭(株式会社ジークス)
  2. 2. 自己紹介若松 浩昭(Hiroaki Wakamatsu) iPhone 3G・Webサイトの設計・フロントエンド周りの実装 003SH・スマートフォン案件が主体 Galaxy S Ⅱ・HTML5-WEST.jpコアメンバー Galaxt Nexus SO-01BTwitter : azuyuu IS05ブログ : goo.gl/x1kk4 My Desktop!! 2
  3. 3. セッションのテーマ 不具合をうまく回避して、 案件を成功に導こう!! 3
  4. 4. セッションの内容1. スマートフォン案件の現状2. 不具合を回避するための事前準備3. 代表的な不具合とその回避方法4. その他、気をつけていること5. 最後に・・・ 4
  5. 5. Chapter. 1スマートフォン案件の現状 5
  6. 6. 日本におけるスマートフォン 6
  7. 7. 案件の多くは・・・ 7
  8. 8. 苦労するのがAndroid対応•Android OS のバージョン•端末の解像度•ブラウザ•機種に依存する不具合 8
  9. 9. Chapter. 2不具合を回避するための事前準備 9
  10. 10. これだけはしておこう:対クライアント編•Webで実現可能な表現・機能の説明•iPhone Androidの説明•Androidの機種依存問題の説明•案件で対応する範囲を明確に 10
  11. 11. •Android 2.2以下も動作対象?•標準ブラウザ以外のブラウザは?•動作検証(担保)の対象となる機種は? 11
  12. 12. これだけはしておこう:クリエイター編•とにかくノウハウが大事。日頃から不具合等の情報収集に励む•要件に対しては事前に必ず検証•検証端末の確保(できれば複数台) 12
  13. 13. Chapter. 3代表的な不具合と回避方法 13
  14. 14. ・・・の前に、不具合に対応するための準備•UserAgentによる判別処理var ua = navigator.userAgent;var isIphone = /iphone/.test(ua);var isAndroid = /android/.test(ua);// Android端末なら、class="android"をHTMLタグに指定if (isAndroid) { $("html").addClass("android");} 14
  15. 15. Case. 1太字•標準フォントの「Droid Sans Japanese」は、全角文字には非対応•機種によっては、太字に完全対応したオリジ ナルフォントがインストールされている SAMSUNG製Android端末 Sharp製Android端末 15
  16. 16. Case. 1太字 ー 回避方法の例 ー•text-shadow を使って太字を再現 (機種別で分けるのは・・・さすがにしんどい) E{ font-weight: bold; } .android E { font-weight: normal; text-shadow: 0 0 1px 文字の色; } 16
  17. 17. Case. 2リンク要素のアウトライン•ブロック要素のアウトライン反応がおかしい <a href="リンク先URL">リンクのタイトル</a> a { display: block; } /* aをブロック要素としてレンダリング */ 17
  18. 18. Case. 2リンク要素のアウトライン ー 回避方法の例 ー•aタグの直下にdivタグを挿入 (pタグや、display:block; にしたspanタグはNG) <a href="リンク先URL"><div>リンクのタイトル</div></a> 18
  19. 19. Case. 3translate3d•translate3d実行後のレンダリングに崩れ リンク要素のアウトライン、transform系プロパティ、 各種インプット系要素 ... 19
  20. 20. Case. 3translate3d•translate3dと同時に指定した、その他の transform系プロパティが反映されない iPhone4 IS05 20
  21. 21. Case. 3translate3d•translate3dを実行した要素内では、 インプット系要素が不可思議な動き デモURL : goo.gl/8oNXZ 21
  22. 22. Case. 3translate3d ー 回避方法の例 ー•Androidではtranslate3dを使用しない E{ transition: all 0.75s ease-out; transform: translate3d(0, 400px, 0); } .android E { transform: translate(0, 400px); } 22
  23. 23. Case. 4オーバーレイ•下層レイヤーのクリック要素(プルダウン含 む)が反応 Case 1 23
  24. 24. Case. 4オーバーレイ•条件によっては、オーバーレイ上の要素が 操作できなくなる可能性も・・・ Case 2 Case 3 Case 4 24
  25. 25. Case. 4オーバーレイ ー 回避方法の例 ー 方法1:ハイライトカラーを透明化 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); Case 1 Case 2 Case 3 Case 4 ハイライトは消えるが、要素は反応している 25
  26. 26. Case. 4オーバーレイ ー 回避方法の例 ー 方法2:タップ時のイベントをキャンセル $("E").on("touchstart", function(e) { e.preventDefault(); } Case 1 Case 2 Case 3 Case 4 プルダウンが機能しなくなる 26
  27. 27. Case. 4オーバーレイ ー 回避方法の例 ー 方法3:クリック(プルダウン)要素を非表示 visibility: hidden; Case 1 Case 2 Case 3 Case 4 下層レイヤーのaタグやプルダウンが全て非表示になるが・・・ 27
  28. 28. Case. 5固定配置 iOSなら5以上、Android OSなら2.2以上 で、position: fixed; が使用可能 28
  29. 29. Case. 5固定配置•iOS4でも対応するなら、ライブラリの使用 を推奨 iScroll4 http://cubiq.org/iscroll-4 29
  30. 30. Case. 5固定配置•Androidでは、iScroll等のライブラリは動 作が不安定•position: fixed; を使用する場合は、 viewportに user-scalable=no の指定が 必須(Android4は除く) 30
  31. 31. Case. 5固定配置•Galaxy S Ⅱなどの一部の機種では、 position: fixed; がうまく動かない 31
  32. 32. Case. 5固定配置 ー 回避方法の例 ー•スクロール途中は固定配置の要素を 非表示にする等、調整を入れる デモURL : goo.gl/jLJwZ 32
  33. 33. Case. 6text-shadow•必ずぼかしの設定値は1px以上にする (Android4は除く) text-shadow: 0 0 1px rgba(0, 0, 0, 0.75); 33
  34. 34. Case. 6text-shadow•Galaxy Nexusでは、特定の文字で文字飛 びが発生するので、text-shadowは無効に if (/Galaxy Nexus/.test(navigator.userAgent)) { $("E").css("text-shadow", "none"); } 34
  35. 35. Case. 7拡大と縮小•3種類のアクション ピンチイン・アウト ダブルタップ 拡大・縮小ボタン 35
  36. 36. Case. 7拡大と縮小•2種類の拡大結果 全体がそのまま拡大 画面幅に合わせて改行 36
  37. 37. Case. 7拡大と縮小•拡大(縮小)時のアクションと結果は、 機種によって違う場合がある 例) Xperia acro: → ピンチアウト ... 全体がそのまま拡大 → ダブルタップ/拡大アイコン ... 画面幅に合わせて改行 HTC EVO 3D: → ピンチアウト/ダブルタップ ... 画面幅に合わせて改行•端末の仕様と割り切る 37
  38. 38. Chapter. 4その他、気をつけていること 38
  39. 39. Point. 1スワイプ系のライブラリの選定•選定する時は「Androidでも動くか?」を 基準にする 39
  40. 40. Point. 1スワイプ系のライブラリの選定•flickSimple イトーヨーカドー、スターバックス、セブンイレブン•flipsnap JRおでかけネット、ドミノピザ、UNO(資生堂)•flickslide 海遊館、ミスタードーナツ、モスバーガー•etc... まとめURL : goo.gl/eagSn 40
  41. 41. Point. 2フォーム系のスタイルを調整•テキストフィールドの調整•プルダウンの高さ調整 input { padding: 8px 5px; } select { height: 36px; } 41
  42. 42. Point. 2フォーム系のスタイルを調整•チェックボックスやラジオボタンのサイズ調 整と、labelタグへのイベント登録 <label onclick=""> <input type="checkbox" /> </label> input[type=checkbox] { -webkit-transform: scale(1.8); } 42
  43. 43. Chapter. 5 最後に・・・ 43
  44. 44. 最後に・・・•スマートフォン案件は、Androidの不具合をどれだけうまく回避できるかが鍵•Androidに関しては、 格好いい 動きの実装は避けた方が幸せ•HTML5のAPIを使用する際は、特に入念な検証が必要 44
  45. 45. スマートフォンブラウザ不具合特集 若松 浩昭(株式会社ジークス) @azuyuu
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×