![発生条件 ～?6.x
<p><input type="text"></p>
<p><textarea></textarea></p>
[type="text"],
textarea {
font-size: 14px;
}
? テキストフィールドやテキストエリアなどの
文字入力が可能なフォームパーツ
? フォントサイズが16px未満](https://image.slidesharecdn.com/slide-130913021648-phpapp01/85/-67-320.jpg)
![font-size: 16px（相当）にする
参照： http://stackover?ow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-
iphone
:root {
/* ブラウザのデフォルトフォントサイズは16px */
font-size: 1em;
}
?
[type="text"],
textarea {
/* デフォルトフォントサイズを継承する */
font-size: 1rem;
}](https://image.slidesharecdn.com/slide-130913021648-phpapp01/85/-68-320.jpg)
![発生条件 ?6.x～
<input type="text" placeholder="プレースホルダ">
? テキストフィールドに placeholder属性 が
指定されている
? CSSで width が 100% に指定されている
[type="text"]{
width: 100%;
box-sizing: border-box;
}](https://image.slidesharecdn.com/slide-130913021648-phpapp01/85/-70-320.jpg)
![親要素に over?ow: hidden
参照： http://stackover?ow.com/questions/12582788/placeholder-attribute-on-text-input-with-
ios-6-from-landscape-to-portrait
/* input要素の親要素に指定する */
form > p {
overflow: hidden;
}
?
form [type="text"] {
width: 100%;
box-sizing: border-box;
}
<form action="">
<p><input type="text" placeholder="プレースホルダ"></p>
</form>
http://qiita.com/items/58621961c1f81b017e8d](https://image.slidesharecdn.com/slide-130913021648-phpapp01/85/-71-320.jpg)
![JSでスクロールさせる
参照： https://code.google.com/p/android/issues/detail?id=15437
$('a[href^="#"]').click(function(){
window.scrollTo(0, $(this.hash).offset().top);
});](https://image.slidesharecdn.com/slide-130913021648-phpapp01/85/-81-320.jpg)
スマートフォンサイト制作 よくあるトラブルと 解決方法?回避方法
- 5. 弊社スタッフの执笔书籍
- 7. はじめに
- 8. スマフォの やっかいな点
- 9. パフォーマンスは高くない Android 4.0.4 Mobile Safari 6.0 Chrome 26.0.1410 0 100,000 200,000 300,000 400,000 361,156回/秒 77,906回/秒 53,235回/秒 jsPerfにて1秒間に処理できる createElement の回数を計測：http://jsperf.com/loop-130517-01/2 GALAXY NEXUS iPhone 4S MacBook Air
- 10. 机种によって挙动が异なる
- 11. 端末の種類が山ほどある 0 10 20 30 40 50 2011 2012 2013（～6月） 7 16 14 4 22 19 17 45 24 DoCoMo au SoftBank スマートフォンデータベースにて調査：http://smartphone.ultra-zone.net/
- 12. 事前の チェックポイント
- 13. 対応OSと 対応機種
- 15. iOS Ver別シェア（06, 2013） iOS4以下 1.4% iOS 5 9.5% iOS 6 89.1% http://stats.unity3d.com/mobile/os-ios.html
- 17. Android Ver別シェア（06, 2013） その他 2% Android 2.3 22% Android 4.0 34.9% Android 4.1 36.3% Android 4.2 4.2% http://stats.unity3d.com/mobile/os.html
- 18. ?2.3.x ?4.0.x / 4.1.x / 4.2.x ?2.2.x以下は トレンド実現困難 Androidの対応範囲
- 20. できる端末から対応
- 21. 検証端末を決める ?iPhone5, 4S / iOS6.1 ?iPhone4 / iOS5.1 ?GALAXY S4 / Android 4.2.2 ?HTC J butter?y / Android 4.1.1 ?Xperia AX / Android 4.0.4 ?SH-06D / Android 2.3.5 クライアントや開発会社と握る
- 23. ?タブレットはどうしますか？ ?Android 3.x には 対応しますか？ ? All rights reserved by Paymentmax
- 24. 基本をおさらい
- 27. 運用効率 ネイティブ Web <
- 30. 画像も倍の密度が必要
- 32. リキッドデザインで作成する
- 36. <meta name="viewport" content="width=device-width,initial- scale=1.0"> ? width=device-width 端末の画面サイズに成行 ? initial-scale=1.0 初期拡大率は等倍 ? 拡大?縮小の不許可は要件などによる 一般的な指定
- 37. RWDか 専用サイトか
- 38. レスポンシブウェブデザイン （RWD） OK メリット NG デメリット ?1ソースで マルチデバイス に対応可能 ?設計やデザイン に十分な知識が 必要
- 45. 切り替えスイッチの実装 ?スマフォ版とPC版の 表示を切り替えるボタン ?表示モードを LocalStorage か Cookie に保存する ?LocalStorage が一般的だが JavaScript以外からアクセス不可 ?CookieはAndroidで難あり
- 48. 鲍滨别の注意点
- 55. 动画配信
- 56. video要素で再生できる動画 参照： http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/ SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html 拡張子 .mp4 映像 H.264 Baseline Pro?le Level 3.0 ～640x480/30fps 音声 AAC-LC ～48kHz 容量 ～2GB
- 57. video要素でできないこと ?動画のダウンロードを禁止すること ?ブラウザ内でインライン再生すること （iPhone, Android 2.x系） ?シークバーやボリューム操作 ?ストリーミング配信
- 60. トラブル シューティング
- 61. 惫颈别飞辫辞谤迟関连
- 62. 文字が大きくなる NG OK
- 63. 発生条件 ～? Chrome $('head') .append('<meta name="viewport" content="width=device- width, initial-scale=1">'); $('.foo').hide(); ? viewport で initial-scale が未指定 ? JSでたくさんの要素を非表示にしてる ? 他にも複合的な要因あり
- 64. 親要素に max-height: 999999px 参照： http://stackover?ow.com/questions/11289166/chrome-on-android-resizes-font .foo{ max-height: 999999px; } <div class="foo"> <!-- !のp要素で現象が発生する場合 --> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div>
- 65. 蹿辞谤尘関连
- 67. 発生条件 ～?6.x <p><input type="text"></p> <p><textarea></textarea></p> [type="text"], textarea { font-size: 14px; } ? テキストフィールドやテキストエリアなどの 文字入力が可能なフォームパーツ ? フォントサイズが16px未満
- 68. font-size: 16px（相当）にする 参照： http://stackover?ow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on- iphone :root { /* ブラウザのデフォルトフォントサイズは16px */ font-size: 1em; } ? [type="text"], textarea { /* デフォルトフォントサイズを継承する */ font-size: 1rem; }
- 70. 発生条件 ?6.x～ <input type="text" placeholder="プレースホルダ"> ? テキストフィールドに placeholder属性 が 指定されている ? CSSで width が 100% に指定されている [type="text"]{ width: 100%; box-sizing: border-box; }
- 71. 親要素に over?ow: hidden 参照： http://stackover?ow.com/questions/12582788/placeholder-attribute-on-text-input-with- ios-6-from-landscape-to-portrait /* input要素の親要素に指定する */ form > p { overflow: hidden; } ? form [type="text"] { width: 100%; box-sizing: border-box; } <form action=""> <p><input type="text" placeholder="プレースホルダ"></p> </form> http://qiita.com/items/58621961c1f81b017e8d
- 73. 発生条件 ～? 2.3.x $('input').focus(function(){ window.scrollTo(0, $(this).offset().top); }); ? フォーカス時に画面をスクロールさせる ? JSでたくさんの要素のスタイルを変更する ? 他にも複合的な要因あり
- 75. その他の困った
- 77. 発生条件 ?6.x～ ? font-family が指定されていない
- 78. font-familyを指定する 参照： http://ofsilvers.hateblo.jp/entry/font-family-for-ios6 /* スマートフォン専用サイトは"sans-serif"のみでも良い */ body{ font-family: sans-serif; } /* iOS,OSXの標準フォントは'Hiragino Kaku Gothic ProN' */ body{ font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; }
- 80. 発生条件 ～? 4.x <a href="#foo">↑ページの先頭へ</a> ? 同じアンカーをもう一度踏む ? URLが変わらないとジャンプしない
- 82. スマホサイトの 検証?確認方法
- 84. Dev Tools
- 86. ResponsiView https://chrome.google.com/webstore/detail/responsiview/kcemonjjmilbiepahkhanlkddonpjlep
- 90. Step.3 local server ?xampp ?MAMP ?python simplehttpserver python -m SimpleHTTPServer 8000
- 92. IPアドレス ?ifco?ng / ipcon?g ?My IP Address
- 93. Adobe Edge Inspect CC
- 94. 颈笔丑辞苍别＋厂补蹿补谤颈
- 95. Charles
- 97. スマホにおける パフォーマンス
- 98. re?ow : リフロー repaint : リペイント
- 99. リフロー?リペイントとは
- 100. …その前に
- 104. リフローは高负荷
- 107. スタイル変更はクラス変更にまとめる $('#foo').addClass('bar'); $('#foo').width(100).height(50).css('color': '#FC0'); ▼ #foo.bar{ width: 100px; height: 50px; color: #FC0; } クラスの付け替えはできるだけ末端の要素で
- 108. その他のポイント ?position: ?xed を使わない ?アニメーションさせる要素は position: absolute にする ?アニメーションは60fpsを目標にする （Chromeのデベロッパーツールで計測可）
- 110. まとめ
- 114. ピクセルパーフェクト に こだわらない