私は最近、 css-tricks.comウェブログ#38: Basics & Tips on Designing for the iPhoneから Chris Coyier のチュートリアルを行いました。言うまでもなく、私は非常に興奮し、彼のクライアントに iPhone Web サイトを提供できるように、コード モンキーの仕事をすることを男性に提案しました。彼はかっこいいと言いましたが、他のモバイル デバイスはどうでしょうか。良い質問。では、Android、Blackberry、WindowsMobile などの Web サイトを設計する上での重要な点は何でしょうか? 人々は他のプラットフォームに悩まされていますか? ありがとう。
1190 次
1 に答える
13
最近の Webkit と Opera:
iPhone の Safari、Opera Mobile、および Android の Webkit の開発は似ていますが (同一ではありません)、これらの開発は非常に単純です。
CSS2.1 と JavaScript+DOM に依存できます (ただし、UI イベントには注意してください)。スタイルシートを少し変更するだけで、通常の Web サイトを提供することができます。
秘訣は、これらのスタイルシートの提供にあります。stringを使用しないでくださいUser-Agent。
一部のモバイル ブラウザーはハンドヘルド メディアを読み取り、一部のブラウザーは画面スタイルを主張して 960 ピクセル幅の画面を装う (iPhone :/) ため、次の両方でモバイル スタイルシートを提供する必要があります。
<link media="handheld" ...>
<link media="screen and max-device-width:480px" ...>
後者はCSS3 Media Queryです。これは非常に便利で、他のモバイル ブラウザーでも動作します (スタイルシートで使用できます@media {})。
これらのイベントはタッチ スクリーンでは機能しないため、:hoverまたはに依存しないでください。onmouseover
onclick遅れてmousemove動作しない場合があります。カスタム DHTML ウィジェット (ドロップダウン、スライダー) とドラッグ アンド ドロップは、タッチ イベントを使用しない限り、タッチスクリーンでは機能しません(ありがたいことに、すべての最新ブラウザーが採用しています)。
Apple 独自のもの (およびマークアップとレイアウトの分離に柔軟性がなく違反している)に加えて、現在最新の Opera でサポートされているCSS3 @viewport<meta name=viewport>を見てください。@-o-viewport
シミュレーター/エミュレーター
Opera Mobile でページをテストするには、シミュレーターを入手します (または、古いデスクトップ バージョンで [View] → [Small Screen] を選択します)。
CSS が少し再フォーマットされ、DHTML がサーバー側で実行されるため、Opera Mini は特別です。これは常に期待どおりの結果をもたらすとは限りません。利用可能なシミュレーターがあります。
アンドロイド
Android SDK が必要で、コマンドラインをいじって不格好な UI を起動し、多数のパッケージをダウンロードし、何十もの無関係なあいまいな設定を備えた仮想デバイスを作成し、このモンスターがコンピューターのファンをロードしてクアッドコプターに変えるのを我慢してから、sss を実行できます。 「ブラウザ」での .sss..slooowlyyyy テスト (私の Intel i5 は遅すぎて、Galaxy Tab をシミュレートできません。URL の入力が完了する前でもブラウザが「応答を停止」します)
Android を搭載した携帯電話/タブレットを入手して、実際のデバイスでテストする方が簡単です (ただし、Samsung の Player "iPod" に相当するものは使用しないでください。これは、時代遅れのソフトウェアでゴミになるからです)。
Android ブラウザーは、Linux のやり方が好きでない人にとっては本当に苦痛です。JS コンソールを読むだけでも、コマンドラインでリモート デバッグ接続とログ フィルタリングをいじる必要があります。
Firefox モバイル (以前の Fennec)
利用可能なシミュレーターがあります(モバイル ダウンロードの下の「Windows / Mac OS X / Linux」へのリンクは、デスクトップ バージョンではなく、デスクトップ OS 用のモバイルです)。
シミュレーターは非常に基本的なものであり、モバイル Firefox 自体は非常に優れています。たとえば、うまく機能しますがoverflow:scroll、WebKit ベースのブラウザーでは、オーバーフローの実装は非常に直感的でないものから完全に壊れているものまでさまざまです。
ポケット IE:
Windows Mobile < 7 の PIE は、Windows の IE と同じエンジンではありません。ほとんどの場合、IE4 と同じくらい原始的でバグがありますが、(かろうじて) のような驚くほど高度なプロパティをサポートしていますdisplay:table。
handheldとスタイルシートの両方を同時に読み取りscreen、標準に違反し、自分自身を攻撃します。PIE をサポートする場合は、handheldスタイルシートへのリンクを最後に配置し、その中の画面スタイルのすべてのルールを逆/上書きします。
とにかく死んでいて、エミュレーターを入手するのは難しいです。
Windows Phone 7 は現在 IE7 と同様に出荷されており、Microsoft は後で IE9 レベルの何かを約束しました。
新しい (少数派) BlackBerry
最新の WebKit ベースの BlackBerry ブラウザーは非常に優れており、一流の市民として扱うことができます (上部にリンクされている WebKit の比較を参照してください)。
現在最も人気のある BlackBerry & OpenWave、Blazer など:
BB OS6以前は悪夢です。基本的な HTML のみが機能します。CSS は一部のモデルで機能しますが、原始的で壊れています。JavaScript は一部のモデルでしか機能せず、信じられないほど遅く、不足しています (基本的な DHTML についてさえ忘れてください)。
RIM から無料の BB シミュレーターを入手できます (煩わしい登録が必要です)。運が悪い場合は、一度正しく起動してから、完全に再インストールする必要があります:)
同じことは、ローエンドの携帯電話の他の何百ものモバイル ブラウザにも当てはまります (適切なシミュレータを備えた OpenWave などを搭載しています)。それらのために、1 列の基本的な HTML を削除した Web サイトを準備する必要があります。
Google ワイヤレス トランスコーダ
あらゆるモバイル デバイス向けに最適化された気の利いた (X)HTML を作成したとしても、Google モバイル検索のユーザーには表示されません。代わりに、すべてのページが「ワイヤレス トランスコーダー」を介してプロキシされ、コードが切り刻まれ、すべてのスタイルシートとスクリプトが削除されます (ブラウザーがそれらをサポートしているかどうかに関係なく) <font>。
于 2008-12-09T14:01:57.070 に答える