Download as PDF, PPTX
![発生条件 ∼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/slide-67-320.jpg)
![font-size: 16px（相当）にする
参照： http://stackoverflow.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/slide-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/slide-70-320.jpg)
![親要素に overflow: hidden
参照： http://stackoverflow.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/slide-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/slide-81-320.jpg)
![XpagesDay 2014 [A-2] スタンダードクライアントで xpages を使ってみよう](https://cdn.slidesharecdn.com/ss_thumbnails/xpagesday2014xpages-141118230721-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. パフォーマンスは高くない Android 4.0.4 Mobile Safari6.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 DoCoMoau SoftBank スマートフォンデータベースにて調査：http://smartphone.ultra-zone.net/
- 12.
- 13.
- 14.
- 15. iOS Ver別シェア（06, 2013） iOS4以下 1.4% iOS5 9.5% iOS 6 89.1% http://stats.unity3d.com/mobile/os-ios.html
- 16.
- 17. Android Ver別シェア（06, 2013） その他 2% Android2.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の対応範囲
- 19.
- 20.
- 21. 検証端末を決める •iPhone5, 4S /iOS6.1 •iPhone4 / iOS5.1 •GALAXY S4 / Android 4.2.2 •HTC J butterfly / Android 4.1.1 •Xperia AX / Android 4.0.4 •SH-06D / Android 2.3.5 クライアントや開発会社と握る
- 22.
- 23. •タブレットはどうしますか？ •Android 3.x には 対応しますか？ ©All rights reserved by Paymentmax
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36. <meta name="viewport" content="width=device-width,initial- scale=1.0"> •width=device-width 端末の画面サイズに成行 • initial-scale=1.0 初期拡大率は等倍 • 拡大・縮小の不許可は要件などによる 一般的な指定
- 37.
- 38. レスポンシブウェブデザイン （RWD） OK メリット NGデメリット •1ソースで マルチデバイス に対応可能 •設計やデザイン に十分な知識が 必要
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45. 切り替えスイッチの実装 •スマフォ版とPC版の 表示を切り替えるボタン •表示モードを LocalStorage か Cookie に保存する •LocalStorageが一般的だが JavaScript以外からアクセス不可 •CookieはAndroidで難あり
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56. video要素で再生できる動画 参照： http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/ SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html 拡張子 .mp4 映像 H.264Baseline Profile Level 3.0 ∼640x480/30fps 音声 AAC-LC ∼48kHz 容量 ∼2GB
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63. 発生条件 ∼ Chrome $('head') .append('<metaname="viewport" content="width=device- width, initial-scale=1">'); $('.foo').hide(); • viewport で initial-scale が未指定 • JSでたくさんの要素を非表示にしてる • 他にも複合的な要因あり
- 64. 親要素に max-height: 999999px 参照：http://stackoverflow.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.
- 66.
- 67. 発生条件 ∼6.x <p><input type="text"></p> <p><textarea></textarea></p> [type="text"], textarea{ font-size: 14px; } • テキストフィールドやテキストエリアなどの 文字入力が可能なフォームパーツ • フォントサイズが16px未満
- 68. font-size: 16px（相当）にする 参照： http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on- iphone :root{ /* ブラウザのデフォルトフォントサイズは16px */ font-size: 1em; } [type="text"], textarea { /* デフォルトフォントサイズを継承する */ font-size: 1rem; }
- 69.
- 70. 発生条件 6.x∼ <input type="text"placeholder="プレースホルダ"> • テキストフィールドに placeholder属性 が 指定されている • CSSで width が 100% に指定されている [type="text"]{ width: 100%; box-sizing: border-box; }
- 71. 親要素に overflow: hidden 参照：http://stackoverflow.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
- 72.
- 73. 発生条件 ∼ 2.3.x $('input').focus(function(){ window.scrollTo(0,$(this).offset().top); }); • フォーカス時に画面をスクロールさせる • JSでたくさんの要素のスタイルを変更する • 他にも複合的な要因あり
- 74.
- 75.
- 76.
- 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; }
- 79.
- 80. 発生条件 ∼ 4.x <ahref="#foo">↑ページの先頭へ</a> • 同じアンカーをもう一度踏む • URLが変わらないとジャンプしない
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90. Step.3 local server •xampp •MAMP •pythonsimplehttpserver python -m SimpleHTTPServer 8000
- 91.
- 92. IPアドレス •ifcofing / ipconfig •MyIP Address
- 93.
- 94.
- 95.
- 96.
- 97.
- 98. reflow : リフロー repaint: リペイント
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107. スタイル変更はクラス変更にまとめる $('#foo').addClass('bar'); $('#foo').width(100).height(50).css('color': '#FC0'); ▼ #foo.bar{ width: 100px; height:50px; color: #FC0; } クラスの付け替えはできるだけ末端の要素で
- 108. その他のポイント •position: fixed を使わない •アニメーションさせる要素は position:absolute にする •アニメーションは60fpsを目標にする （Chromeのデベロッパーツールで計測可）
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.