スマートフォンサイト構築時に気をつけたいポイント集

Supporting_Multiple

スマートフォンサイト構築時のコーディングで気を付けたいポイントを次回コーディングの時のためにメモしておきます。

IT/WEB業界への転職なら

全般

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解像度一覧

忘れることがあるのでメモ。

  • 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ピクセル

tap_target

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 × 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:fixeduser-scalable=noが揃ってしまうと一部のAndroidで回転方向の指定が効かない現象が起こるとのこと。Android 2.2~2.3を判別して代替画像に切替えるか、使わないか。

SVG最適化

SVGOMG

SVGもモバイル向けに最適化したいところです。こちらはオンラインから簡単に容量を削減できるツール。