スマホ用サイト制作の基本をまとめました。まずは素材の味を知ることですね。

使用できる標準日本語フォント

  • iOS(iPhone/iPad)で使用できる日本語フォントは「ヒラギノ角ゴ Pro W3/W6」
  • Android は「DroidSansJapanese」※標準ではボールドなし

画面解像度の違い

  • iPhone 4/4S は「960×640px(解像度326ppi)」
  • iPhone 3G/3GS は「480×320px(解像度163ppi)」
  • 新iPad は「2,048×1,536px(解像度264ppi)
  • iPad/iPad 2 は「1,024×768px(解像度132ppi)
  • Android は「スマートフォン比較表」を参照

表示できる画像フォーマット

  • iOS は png(推奨), tif, jpg, gif, bmp
  • Android は png(推奨), jpg, gif, bmp
  • ※iOS で SVG(Scalable Vector Graphics)が使えるようです。Android の タブレットに搭載されている Honeycomb(3系)では SVG をカバー。2系は未対応。

    HTML5, CSS3の対応表

    Mobile HTML5」や「HTML5対応状況 – Droidget-jp」を参照。実機があるなら「What’s my IP?, What’s my browser?」にアクセスして調べてみるのがスマート。

    viewport

    iOS と Android は、meta タグで viewport をサポートします。
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    • width(画面の幅)を「device-width(デバイスの幅に合わせる)」もしくはピクセル指定
    • initial-scale(初期拡大率)を「1.0(width で設定したデバイスの幅の100%表示)」
    • minimum-scale(拡大率の最小値)を「1.0(100%表示)」
    • maximum-scale(拡大率の最大値)を「1.0(100%表示)」
    • user-scalable(ズーム操作を許可するかどうか)を「no(拡大縮小しない)」

    reset.css

    reset.css は「Yahoo! UI Library」でホスティングされているものなどを使います。

    <link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">

    この内容に加えて、ナビゲーションのリンクをブロック要素に変更し、画像サイズはデバイスの幅に合わせるようにします。

    nav li a {
    	display: block;
    }
    img {
    	max-width: 100%;
    	height: auto;
    }

    htaccessでの振り分け

    サーバ側でスマホを判定して URL を振り分ける場合は .htaccess にこのように書きます。

    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_USER_AGENT} (iPhone|ipad|Android.*Mobile|Windows.*Phone) [NC]
    RewriteCond %{QUERY_STRING} !mode=pc
    RewriteRule ^$ /smartphone/ [R,L]
    </IfModule>

    その他の情報など

    最後までお読みいただきありがとうございます!よろしければフォローお願いします!

    もしお役に立てる情報がありましたら、そのお気持ちを Bitcoin や PayPal で送金していただけると、とても嬉しく思います!

    他にも、Amazonのほしい物リストからお選びいただくこともできます。

    こちらの関連記事もあわせてどうぞ!