3

私は最初のモバイル サイトに着手しています。それは単純なものであり、十分に簡単なはずですが、いくつか質問があります。

答えられるすべての q に答えてください。

1) 「styles_mobile.css」シートをモバイル トラフィックに配信するようサイトに指示するにはどうすればよいですか? これに最も一般的に使用されるコードはありますか?

2) インデックス ページがあり、新しいモバイル ページを作成しています。「/index_mobile.htm」は「間違っています」。モバイル ページは独自のエンティティ (/mobile.htm など) にするか、既存のインデックス ページに基づくか? どうすればリダイレクトできますか? アドレス「m.mywebsiteaddress.com」を作成するにはどうすればよいですか

3) 現在、私はラップトップで編集を行っており、それがどのように見えるかを確認するには、それらを ISP にアップロードして iPhone で編集の効果を確認する必要があります。Mac から直接これを行うにはどうすればよいですか?

4) HTML要素に関する標準構造はありますか? たとえば、標準のドキュメントには、html、head、および body 要素があります。HTML5 には、ヘッダー、ナビゲーション、フッターの各要素が含まれるようになりました。注意すべき mobi 固有の要素はありますか?

今のところはこれですべてですが、今後数日間でこれに追加することができます. ポインタやアドホックなアドバイスを歓迎します

4

4 に答える 4

2

私のモバイルの経験では、モバイルはまったく別のサイトであると考える必要があります。異なるhtml、異なるcss、異なるjs。私が見た多くの実装は、これをアドレスm.site.comまたは単にタグ付けするだけwww.site.com/m/です。重要な要素は、それらを別々に考えることです。

あなたの質問について：

  1. デバイスに応じてトラフィックを区別するのに役立つさまざまなフレームワークがあります。秘訣は、ブラウザから送信されたユーザーエージェントをチェックして識別を行うことです。ユーザーエージェントに応じて、作成した2つのサイトのそれぞれにトラフィックを送信します。Springには、このSpring -mobileを実行するための基本的な機能がいくつかあります。

  2. これは私の答えの最初の部分に戻ります。/m私は通常、、、を含むというディレクトリを作成しhtml、cssそのjs下に。ユーザーエージェントに基づくhttpリダイレクトを使用して、各サイトにトラフィックを送信できます。の作成に関してはm.site.com、設定内容とサブドメインを作成できるかどうかによって異なります。

  3. 使用しているソフトウェアに応じて、Macで直接公開できます。Macでは、システム環境設定/共有に移動してWeb共有を有効にすることができます。これにより、実際にMacのApacheサーバーがアクティブになります。ファイルを/Users/ yourid / Sites / projectに配置すると、http：// yourlocalip /〜yourid/projectをクリックしてアクセスできます。私はこれを記憶によって行っているので、私はここかそこかで離れているかもしれません。

  4. モバイルサイトのjquery+jquerymobileをご覧になることをお勧めします。それはその過程で多くの悲しみを取り除くでしょう。

于 2012-05-06T16:58:34.763 に答える
2

1) 「styles_mobile.css」シートをモバイル トラフィックに配信するようにサイトに指示するにはどうすればよいですか? これに最も一般的に使用されるコードはありますか?

メディア クエリを含むリンク スタイルシートを使用できます。

<link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css">

2) インデックス ページがあり、新しいモバイル ページを作成しています。「/index_mobile.htm」は「間違っています」。モバイル ページは独自のエンティティ (/mobile.htm など) にするか、既存のインデックス ページに基づくか? どうすればリダイレクトできますか? アドレス「m.mywebsiteaddress.com」を作成するにはどうすればよいですか

もう 1 つのオプションは、1 つのページ (index.html) を提供し、表示領域が縮小するにつれて、フロートされた要素を互いの上にスタックし始めることです。デスクトップと携帯電話の両方でhttp://www.html5rocks.com/en/を表示します。または、携帯電話が近くにない場合は、ブラウザーのサイズを変更して、サイトが複数の列を削除し始め、1 列のビューを作成するのを確認してください。1 つのファイル (つまり、index.html) のみを提供し、モバイル ユーザーをモバイル ページ (つまり、mobile.html) にリダイレクトしません。

3) 現在、私はラップトップで編集を行っており、それがどのように見えるかを確認するには、それらを ISP にアップロードして iPhone で編集の効果を確認する必要があります。Mac から直接これを行うにはどうすればよいですか?

Mac に Apache Server をインストールし、適切なポート (ポート 80 および 8080 IIRC) でポート フォワードを実行すると、常に ISP にファイルをアップロードしなくても、電話でページを表示できるようになります。URL は (http://xx.xxx.xx.xx) またはそれに類似したものになります。

4) HTML要素に関する標準構造はありますか? たとえば、標準のドキュメントには、html、head、および body 要素があります。HTML5 には、ヘッダー、ナビゲーション、フッターの各要素が含まれるようになりました。注意すべき mobi 固有の要素はありますか?

いいえ、モバイル ブラウザはデスクトップ ブラウザと同じ HTML タグをレンダリングします。ビューポート メタ タグを使用している場合でも、XHTML または HTML4 doctypes を使用して「モバイル化された」Web サイトをモバイル ブラウザーで正常に表示するのに多くの問題があったため、HTML5 doctype (モバイル ブラウザーがサポートする) を使用することを検討する必要があります。サイトが非常に縮小されて見えるためです。

これは、モバイル Web 開発に関して私が見つけた最高のリソースです。

http://www.html5rocks.com/en/mobile/mobifying/

于 2012-05-06T17:03:51.177 に答える
1

前の 2 つの回答は良かったのですが、完全には同意できません。それらは複雑すぎます。

  1. CSS メディア クエリを使用して、画面の幅や向きごとに異なるスタイルでコンテンツをスタイルします。
  2. 気にしないでください。保守性のために、メディア クエリで異なるスタイルのサイトを 1 つだけ作成する必要があります。
  3. 繰り返しますが、メディア クエリです。モバイルで使用する代わりに、ブラウザで直接使用して開発/デバッグ(max-device-width: 480px)できます。(max-width)それ以外の場合、OS X を使用している場合は、Xcode に付属の iOS シミュレーターがうまく動作します (iPad も含まれます!)。
  4. いいえ、通常のウェブページです。

余談ですが、モバイル デバイス用の別のスタイルシートをロードするというアドバイスを受け入れる必要はないと思います。別のスタイルシートをロードすると、HTTP リクエストが 1 つ追加されます。すべてのメディア クエリ スタイルをメイン スタイルシートに保持できます。

于 2012-05-06T17:10:16.880 に答える
0

「通常の」スタイルシート (つまり、デスクトップ スタイルシート) 内でメディア クエリを使用するには、次の手順を実行します。

/* desktop */
body { background: #FFFFFF; }
header { width: 100%; }

/* queries for devices with a max viewing area of 480px */
@media only screen and (max-width: 480px) {
  body { background: #444444; }
}

上記の CSS は、デスクトップ ブラウザーでテストできます。たとえば、上記のスタイルをスタイル タグに入れ、ブラウザーで 480 ピクセルを超える幅でページを表示します (最大化されたウィンドウで十分です)。次に、背景が暗い色に変わるまでウィンドウの幅をサイズ変更します (ウィンドウの幅が 480px 未満になると変化します)。

于 2012-05-09T02:53:12.133 に答える