Mais conteúdo relacionado Semelhante a スマートフォンブラウザ不具合特集 (20) スマートフォンブラウザ不具合特集2. 自己紹介
若松 浩昭(Hiroaki Wakamatsu) iPhone 3G
・Webサイトの設計
・フロントエンド周りの実装
003SH
・スマートフォン案件が主体 Galaxy S Ⅱ
・HTML5-WEST.jpコアメンバー
Galaxt Nexus
SO-01B
Twitter : azuyuu
IS05
ブログ : goo.gl/x1kk4
My Desktop!!
2
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
16. Case. 1
太字 ー 回避方法の例 ー
•text-shadow を使って太字を再現
(機種別で分けるのは・・・さすがにしんどい)
E{
font-weight: bold;
}
.android E {
font-weight: normal;
text-shadow: 0 0 1px 文字の色;
}
16
18. Case. 2
リンク要素のアウトライン ー 回避方法の例 ー
•aタグの直下にdivタグを挿入
(pタグや、display:block; にしたspanタグはNG)
<a href="リンク先URL"><div>リンクのタイトル</div></a>
18
22. Case. 3
translate3d ー 回避方法の例 ー
•Androidではtranslate3dを使用しない
E{
transition: all 0.75s ease-out;
transform: translate3d(0, 400px, 0);
}
.android E {
transform: translate(0, 400px);
}
22
25. Case. 4
オーバーレイ ー 回避方法の例 ー
方法1:ハイライトカラーを透明化
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
Case 1 Case 2 Case 3 Case 4
ハイライトは消えるが、要素は反応している
25
26. Case. 4
オーバーレイ ー 回避方法の例 ー
方法2:タップ時のイベントをキャンセル
$("E").on("touchstart", function(e) {
e.preventDefault();
}
Case 1 Case 2 Case 3 Case 4
プルダウンが機能しなくなる 26
27. Case. 4
オーバーレイ ー 回避方法の例 ー
方法3:クリック(プルダウン)要素を非表示
visibility: hidden;
Case 1 Case 2 Case 3 Case 4
下層レイヤーのaタグやプルダウンが全て非表示になるが・・・
27
32. Case. 5
固定配置 ー 回避方法の例 ー
•スクロール途中は固定配置の要素を
非表示にする等、調整を入れる
デモURL :
goo.gl/jLJwZ
32
37. Case. 7
拡大と縮小
•拡大(縮小)時のアクションと結果は、
機種によって違う場合がある
例)
Xperia acro:
→ ピンチアウト ... 全体がそのまま拡大
→ ダブルタップ/拡大アイコン ... 画面幅に合わせて改行
HTC EVO 3D:
→ ピンチアウト/ダブルタップ ... 画面幅に合わせて改行
•端末の仕様と割り切る
37