単純なサイトを複数のモバイル ブラウザーで正しく表示するにはどうすればよいですか?

Question

プレーンな HTML と CSS を備えたかなりシンプルなサイト (最小限の JS) があります。これは、メイン アプリケーション用のシンプルなモバイル インターフェイスです。

複数の列があり、複数のブラウザが単一列を強制しているようで、問題が発生しています。

いくつかの検索を通じて、2 つのメタ タグに遭遇しました。

<meta name="MobileOptimized" content="220" />
<meta name="viewport" content="width=320" />

これらにより、IE Mobile と iPhone の適切な「スケールされた」ビューが得られます。PalmのBlazerでは何の問題も発生していません。しかし、ブラックベリーは別問題です。

Blackberry にはブラウザのビューを制御する簡単な方法もありますか?シンプルとは、そのデバイス用の特別なページを作成しないことを意味します。

Answer 1

iPhone など用に「中」バージョンをわざわざ作る必要はありません。iPhone ユーザーは実際の Web ページを簡単に見ることができます。フルバージョンと単一列バージョンを用意すれば、最小限の作業で最大の視聴者にリーチできます。

ただし、あなたの質問に答えると、Blackberry に 1 列ビュー以外のことを実行させる良い方法はありません。CSS と単純な JavaScript が引き続き適用されるため、かなりプロフェッショナルに見えるようにすることはできますが、水平方向の領域の多くを失う必要があります。

Answer 2

私がお勧めするのは、サイトの 2 つまたは 3 つのバージョンを作成することです。

• 最新のデスクトップ ブラウザ向けの本格的なサイト (非常に重いアプリケーションの場合)
• 優れたモバイル ブラウザーとデスクトップ ブラウザー用の最小限の JS と CSS を備えたサイト (iPhone や SkyFire が思い浮かびます)
• JS がなく、単一カラムで、ほとんどがプレーンテキストだけのサイト。

その理由は、3 ～ 4 個のデスクトップ ブラウザのコーディングが十分に難しいためです。さらに 100 台のデバイスをコード化したり、情報を掲載するだけの単純なページを作成したりする必要はありません。

Web 開発の基本的な設計原則を思い出してください。ユーザーは気にしません。彼らは情報や機能を求めています。悪いモバイルブラウザ (IE または Blackberry) 用のシンプルで明確なレイアウトがあれば、見た目はずっと良くなります。その後、何かをハックしようとすると、最終的にはメンテナンス性が悪夢となり、誰かがさらに別のモバイルを使用した場合に見栄えが悪くなる可能性があります。ブラウザでは、まだ携帯電話専用のサイトを作成していません。

Answer 3

BlackBerry (OS 4.6 以降) は、meta-viewport タグと meta-HandheldFriendly タグの両方をサポートしています。次の「コンテンツ デザイン ガイドライン」ドキュメントを参照してください。 http://na.blackberry.com/eng/support/docs/subcategories/?userType=21&category=BlackBerry+Browser 詳細については。