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

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

若松浩昭（株式会社ジークス）

自己紹介

若松浩昭（Hiroaki Wakamatsu） iPhone 3G

・Webサイトの設計
・フロントエンド周りの実装
003SH
・スマートフォン案件が主体 Galaxy S Ⅱ

・HTML5-WEST.jpコアメンバー
Galaxt Nexus
SO-01B

Twitter : 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. 3
translate3d

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

19

Case. 3
translate3d

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

iPhone4 IS05

20

Case. 3
translate3d

•translate3dを実行した要素内では、
インプット系要素が不可思議な動き

デモURL :
goo.gl/8oNXZ

21

Case. 3
translate3d ー回避方法の例ー

•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();
}


プルダウンが機能しなくなる 26

Case. 4

方法３：クリック(プルダウン)要素を非表示
visibility: hidden;


下層レイヤーの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. 6
text-shadow

•必ずぼかしの設定値は1px以上にする
（Android4は除く）

text-shadow: 0 0 1px rgba(0, 0, 0, 0.75);

33

Case. 6
text-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

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

More Related Content

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