スマートフォンサイト構築時のコーディングで気を付けたいポイントを次回コーディングの時のためにメモしておきます。
全般
viewport
デバイスを横向きにした時の処理一例です。
一般(ページ拡大表示)ピンチアウト/ピンチインOK。通常はこれを使うことが多い。
<meta name="viewport" content="width=device-width">
サイズを変更せず、ピンチアウト/ピンチインOK
<meta name="viewport" content="width=device-width,initial-scale=1.0">
2倍に拡大した状態でページ表示
<meta name="viewport" content="width=device-width,initial-scale=2.0">
Androidのposition:fixed
の不具合があった時に対応する(拡大縮小は不可)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Androidの時だけ上記を指定、他はページ拡大表示を指定する例
if (navigator.userAgent.indexOf('Android') > 0) { document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">'); }else{ document.write('<meta name="viewport" content="width=device-width">'); }
ユーザーエージェント判別によるクラス名付与
ユーザーエージェント情報によって、判別しやすいクラス名をbodyに付与します。後はクラス名に対応するレイアウト等をCSSなどに記述していきます。
Androidの時に、クラス名(ua_android)を付ける場合
if (navigator.userAgent.indexOf('Android') > 0) { $('body').addClass('ua_android'); }
Chromeの時に、クラス名(ua_chrome)を付ける場合
if (navigator.userAgent.indexOf('Chrome') > 0) { $('body').addClass('ua_chrome'); }
状況に応じてiphone / ipad / firefoxなどに置き換えてください。
メディアクエリ – all を省略系で記述する
メディアタイプ(全てのデバイス)を指定するときは、all / andなどの記述を省略してもOKです。複数連結する場合は「and」、OR条件ならカンマ 「,」、否定は「not」、非対応ブラウザは「only」を使います。
/* 幅が769px以上の時 - PC */ @media (min-width: 769px) {....} /* 幅が768px以下の時 - iPad iPhone*/ @media (max-width: 768px) {....} /* iPhone6 Plus */ @media screen and (min-width: 414px) and (max-width: 500px){....}
主要スマートフォン – ブラウザサイズ
忘れることがあるのでメモ。
- iPhone 3 / 320×480
- iPhone 4 / 320×480
- iPhone 5 / 320×568
- iPhone 6 / 375×667
- iPhone 6 Plus / 414×736
- iPad / 768×1024
- Xperia z / 360×640
- Nexus 5 / 360×640
- Nexus 7 / 600×960
- Galaxy S4 S5 / 360×640
iPhone解像度一覧
タップ
最適なタップターゲットは44と48ピクセル
iOSの場合Apple Developerによると、指先でタップできる範囲は44 x 44ポイント以上だと記載されています。
Androidの場合は、Google Developersによると48ピクセル以上とのこと。タップミスを防ぐために調整しておきたい部分です。
タップの反応を早める
タブレットやスマホでは、マウスを使わずタッチパネル操作になります。jsなどに記述してある「click」の箇所を「touchstart」(タッチの瞬間に発生)に変更するか、追記すればOK。結構反応がよくなります。
バグ対処法一覧
ある程度規格が統一してあるiPhoneより、特に古い機種(4.1以前)に依存するAndroid標準ブラウザのトラブルやバグ取りに時間がかかります。(Chrome Developer Toolで検証は不十分、実機確認は必須)もし、以下を使っているようであれば、チェック。
iPhoneやiPad / Safari – タップバグ
バージョンによっては、iPhoneやiPadでa要素をタップした時に、リンク先へ遷移しないことがあります。クリックとマウスオーバーが同時に換算されているような挙動。スマートフォンサイトの時は:hover
の記述を見直します。最悪、:hover
を:active
に変更。
Android × Canvas
Canvasを使うとAndroid端末によっては、OSが非常に高温になったりスクロールの動きがおかしくなることがあったのですが、stage.clear();
を最初に呼ぶか、代替画像で対処するか、oveflow:hidden
辺りを探ってみます。以下、対処法を書いてあるサイトをピップアップ。
- Android × Canvas の即死ポイントとその回避策 | buccchi.jp
- Android 4.1/4.2 でCanvasを使うとゴーストが発生する – メモログ
- Happy Elements Labs: 世界平和とAndroid
Android × position:fixed
グローバルメニューやモーダルウィンドウにposition: fixed
を使う機会が多いと思いますが、chrome以外のデフォルトブラウザにて上手く表示されないこともあります。代用としてiScroll 5(一部不安定)を使うか、上記で書いたように、
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
で対処。
Android × z-index
重なり順がおかしい、z-index
の挙動が怪しいという時は、transform: translate3d(0, 0, 0);
で対処可能。
Android × transform:rotate
position:fixed
とuser-scalable=no
が揃ってしまうと一部のAndroidで回転方向の指定が効かない現象が起こるとのこと。Android 2.2~2.3を判別して代替画像に切替えるか、使わないか。
SVG最適化
SVGもモバイル向けに最適化したいところです。こちらはオンラインから簡単に容量を削減できるツール。