クロスデバイス対応ウェブ

ウェブサイトをクロスデバイス対応させるために有用な情報をまとめていきます。

プログレッシブ・エンハンスメント

プログレッシブ・エンハンスメントは、クロスデバイスを実現する上で欠かせない重要な概念。ウェブ標準仕様を根拠に様々なタイプのウェブクライアントが乱立するであろう今後のウェブに於いて、あらゆるクライアントに対して適したインターフェイスを提供するには、この考え方を導入せざるを得まい。

詳しくは、次のサイトで解りやすく説明されている。

ウェブ標準 MediaType と MediaQuery

メディアタイプ(CSS2)とメディアクエリ(CSS3)を使って、1通りのスタティックなHTMLの実装からクロスデバイス向けのスタイルを設定できる。

対応状況とテスト

どんなブラウザが、どんなメディアタイプを持っているかを調べた。テストとまとめのページはこちら

スマートフォン関連

非標準的な仕様ではあるが、WebKit系スマートフォン用ブラウザでサポートされる機能。

viewport

iPhone、Android端末に搭載されているWebKit系のスマートフォンブラウザで、レイアウト制御について幾つかの設定ができる。

<meta
  name="viewport"
  content="
    width=device-width;
    initial-scale=1.0;
    minimum-scale=0;
    maximum-scale=10;
  "
/>

iPhone生活さんのページに詳しく載っている。

format-detection

iPhoneなどでは、電話番号と思えなくもない形式の数字を見つけると、自動的にtel:扱い(リンクになって、押すと電話をかける)になるおせっかいな機能が付いている。これを拒否したい場合は、ヘッダーに次の1行を加える。

<meta name="format-detection" content="telephone=no" />

apple-mobile-web-app-capable

詳細は不明だが、iPhoneでウェブページを『ホーム画面に追加』して実行した場合の挙動を制御する。

no を指定した場合は、単にインターネットショートカットとして扱われ、Mobile Safari に URL が渡される。yes を指定した場合、ウェブページでありながらアプリのように振舞う。

<meta name="apple-mobile-web-app-capable" content="no" />

apple-touch-icon, apple-touch-icon-precomposed

iPhoneでウェブページを『ホーム画面に追加』する際に採用するアイコンのURLを指定する。

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

rel属性の後ろに -precomposed をつけると、光沢効果が付かなくなる。

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />

-webkit-text-size-adjust

iPhone の Mobile Safari では、ブロック要素の大きさに対して文字サイズを自動調整する機能がある。独自実装らしきCSS -webkit-text-size-adjust で、この機能をコントロールすることができる。例えば、機能をオフにするには none を指定する。

*{
    -webkit-text-size-adjust:none;
}

参考サイト: 画面表示関係 - iPhone 3G DevWiki

ちなみに、CSS2に font-size-adjust というのがあるが、どうも別モノのようだ。

iPhoneの気づきにくい諸問題

再描画問題

iPhone の Mobile Safari に特有の、画面の再描画に関する挙動がある。iPhone は、画面の要素をレイアウトする際のパフォーマンスを向上させるため、画面を一旦レンダリングしたあとは、単に画像として画面上で扱っている模様。

JavaScriptやCSS3でアニメーション処理などを実装する場合、この特徴を上手く考慮していないと、著しくパフォーマンスを損なう結果になる場合もあるので、注意が必要。

下記は、この問題について幾つか実験してみた記事。

  • iPhone で border-image を使用してアニメーションを実行すると、動作が重くなる、という問題がある。これについての 実験ページはこちら
  • iPhone で要素をスライドアニメーションする際に、position + top を使用した場合と、transform:translate() を使用した場合のアニメーションのパフォーマンスについて実験した実験ページはこちら

その他の問題

iPhoneのSafariブラウザにおける、色んな制限 (FINE lab.さん) より幾つかピックアップ。

  • GIF、PNG、TIFF画像のデコードサイズ制限は2メガピクセル
  • JavaScriptの実行時間は10秒未満であること。

USER_AGENT 一覧

USER_AGENTの一覧に引っ越しました。

動作チェック環境の作り方

最もよいのは、もちろん実機を用意することだが、ウェブ標準に則った実装であれば、開発者のPC上である程度の表示確認はできる。

screen + MediaQuery環境

  • Opera, Google Chrome, Safari, Firefox などのモダンブラウザが対応している。

handheld環境

tv環境

  • Opera で opera:config を開き、User Prefs の Rendering mode を 5 に設定する。(参照)

projection環境

  • Opera で フルスクリーンモードをオンにする。

自分の過去記事

関連しそうなブックマーク


プロフィール

ときにはデザイナ、ときにはディレクタ、ときにはプログラマ、ときには何でも屋と、ウェブの世界で未熟ながらもいろいろやっている、コヤナギトモヤです。

ツイッター上ではこのヒト。
@tomk79

RSSフィード

ページの先頭へ戻る