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

スマートフォンブラウザ不具合特集若松浩昭（株式会社ジークス）

自己紹介若松浩昭（Hiroaki Wakamatsu） iPhone 3G・Webサイトの設計・フロントエンド周りの実装 003SH・スマートフォン案件が主体 Galaxy S Ⅱ・HTML5-WEST.jpコアメンバー Galaxt Nexus SO-01BTwitter : azuyuu IS05ブログ : goo.gl/x1kk4 My Desktop!! 2

セッションのテーマ不具合をうまく回避して、案件を成功に導こう！！ 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 = /android/.test(ua);// Android端末なら、class="android"をHTMLタグに指定if (isAndroid) { $("html").addClass("android");} 14

Case. 1太字•標準フォントの「Droid Sans Japanese」は、全角文字には非対応•機種によっては、太字に完全対応したオリジナルフォントがインストールされている SAMSUNG製Android端末 Sharp製Android端末 15

Case. 1太字ー回避方法の例ー•text-shadow を使って太字を再現（機種別で分けるのは・・・さすがにしんどい） E{ font-weight: bold; } .android E { font-weight: normal; text-shadow: 0 0 1px 文字の色; } 16

Case. 2リンク要素のアウトライン•ブロック要素のアウトライン反応がおかしい <a href="リンク先URL">リンクのタイトル</a> a { display: block; } /* aをブロック要素としてレンダリング */ 17

Case. 2リンク要素のアウトラインー回避方法の例ー•aタグの直下にdivタグを挿入（pタグや、display:block; にしたspanタグはNG） <a href="リンク先URL"><div>リンクのタイトル</div></a> 18

Case. 3translate3d•translate3d実行後のレンダリングに崩れリンク要素のアウトライン、transform系プロパティ、各種インプット系要素 ... 19

Case. 3translate3d•translate3dと同時に指定した、その他の transform系プロパティが反映されない iPhone4 IS05 20

Case. 3translate3d•translate3dを実行した要素内では、インプット系要素が不可思議な動きデモURL : goo.gl/8oNXZ 21

Case. 3translate3d ー回避方法の例ー•Androidではtranslate3dを使用しない E{ transition: all 0.75s ease-out; transform: translate3d(0, 400px, 0); } .android E { transform: translate(0, 400px); } 22

Case. 4オーバーレイ•下層レイヤーのクリック要素（プルダウン含む）が反応 Case 1 23

Case. 4オーバーレイ•条件によっては、オーバーレイ上の要素が操作できなくなる可能性も・・・ Case 2 Case 3 Case 4 24

Case. 4オーバーレイー回避方法の例ー方法１：ハイライトカラーを透明化 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); Case 1 Case 2 Case 3 Case 4 ハイライトは消えるが、要素は反応している 25

Case. 4オーバーレイー回避方法の例ー方法２：タップ時のイベントをキャンセル $("E").on("touchstart", function(e) { e.preventDefault(); } Case 1 Case 2 Case 3 Case 4 プルダウンが機能しなくなる 26

Case. 4オーバーレイー回避方法の例ー方法３：クリック(プルダウン)要素を非表示 visibility: hidden; Case 1 Case 2 Case 3 Case 4 下層レイヤーのaタグやプルダウンが全て非表示になるが・・・ 27

Case. 5固定配置 iOSなら5以上、Android OSなら2.2以上で、position: ﬁxed; が使用可能 28

Case. 5固定配置•iOS4でも対応するなら、ライブラリの使用を推奨 iScroll4 http://cubiq.org/iscroll-4 29

Case. 5固定配置•Androidでは、iScroll等のライブラリは動作が不安定•position: ﬁxed; を使用する場合は、 viewportに user-scalable=no の指定が必須（Android4は除く） 30

Case. 5固定配置•Galaxy S Ⅱなどの一部の機種では、 position: ﬁxed; がうまく動かない 31

Case. 5固定配置ー回避方法の例ー•スクロール途中は固定配置の要素を非表示にする等、調整を入れるデモURL : goo.gl/jLJwZ 32

Case. 6text-shadow•必ずぼかしの設定値は1px以上にする（Android4は除く） text-shadow: 0 0 1px rgba(0, 0, 0, 0.75); 33

Case. 6text-shadow•Galaxy Nexusでは、特定の文字で文字飛びが発生するので、text-shadowは無効に if (/Galaxy Nexus/.test(navigator.userAgent)) { $("E").css("text-shadow", "none"); } 34

Case. 7拡大と縮小•３種類のアクションピンチイン・アウトダブルタップ拡大・縮小ボタン 35

Case. 7拡大と縮小•２種類の拡大結果全体がそのまま拡大画面幅に合わせて改行 36

Case. 7拡大と縮小•拡大（縮小）時のアクションと結果は、機種によって違う場合がある例） Xperia acro： → ピンチアウト ... 全体がそのまま拡大 → ダブルタップ/拡大アイコン ... 画面幅に合わせて改行 HTC EVO 3D： → ピンチアウト/ダブルタップ ... 画面幅に合わせて改行•端末の仕様と割り切る 37

Chapter. 4その他、気をつけていること 38

Point. 1スワイプ系のライブラリの選定•選定する時は「Androidでも動くか？」を基準にする 39

Point. 1スワイプ系のライブラリの選定•flickSimple イトーヨーカドー、スターバックス、セブンイレブン•flipsnap JRおでかけネット、ドミノピザ、UNO（資生堂）•flickslide 海遊館、ミスタードーナツ、モスバーガー•etc... まとめURL : goo.gl/eagSn 40

Point. 2フォーム系のスタイルを調整•テキストフィールドの調整•プルダウンの高さ調整 input { padding: 8px 5px; } select { height: 36px; } 41

Point. 2フォーム系のスタイルを調整•チェックボックスやラジオボタンのサイズ調整と、labelタグへのイベント登録 <label onclick=""> <input type="checkbox" /> </label> input[type=checkbox] { -webkit-transform: scale(1.8); } 42

Chapter. 5 最後に・・・ 43

最後に・・・•スマートフォン案件は、Androidの不具合をどれだけうまく回避できるかが鍵•Androidに関しては、格好いい動きの実装は避けた方が幸せ•HTML5のAPIを使用する際は、特に入念な検証が必要 44

スマートフォンブラウザ不具合特集若松浩昭（株式会社ジークス） @azuyuu

http://ke-tai.org	8842
http://cssnite.jp	6509
http://neulog.example.jp	999
http://bikkuri.me	552
http://blog.bluearrowslab.com	442
http://temping-amagramer.blogspot.jp	247
https://twimg0-a.akamaihd.net	239
https://si0.twimg.com	193
http://osaka.cssnite.jp	163
https://twitter.com	98
http://tweetedtimes.com	49
http://s.deeeki.com	34
http://us-w1.rockmelt.com	29
http://a0.twimg.com	26
http://slide.yoshiday.net	25
http://webcache.googleusercontent.com	14
http://twitter.com	13
http://tech-pon.tumblr.com	12
http://ss.dotbranch.com	7
http://storify.com	4
http://localhost	4
http://b.hatena.ne.jp	3
http://paper.li	3
http://feeds2.feedburner.com	3
http://purecrest.blogspot.jp	3
http://safe.tumblr.com	3
http://hrt.happy.nu	2
http://www.twylah.com	2
http://wiki.onakasuita.org	2
http://temping-amagramer.blogspot.de	2
http://temping-amagramer.blogspot.com.au	1
http://sc.dotbranch.com	1
http://temping-amagramer.blogspot.com	1
http://favtile.com	1
http://pinterest.com	1
http://twicli.neocat.jp	1
http://reader.mydns.jp	1

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

by Hiroaki Wakamatsu

Accessibility

Upload Details

Usage Rights

37 Embeds 18,531

Statistics

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