0

iPad や Android タブレットのブラウザで表示したい HTML5 アニメーション コンテンツがあります。

私はすでにiPad（Safari）用の1つのバージョンを作成しましたが、これはうまく機能します。

いくつかの異なる Web サイトのレイアウトと画面サイズ (ビューポートの愚かさ) を設計する方がよいでしょうか? それとも、コンテンツを異なるブラウザー、画面、ビューポートのサイズに適応させる単一の Web サイトを設計することは可能ですか?

このためのオンライン チュートリアルとリソースはありますか?

ありがとう

4

3 に答える 3

1

ベストプラクティスは

  • ユーザー エージェント文字列を (ブランド) スニッフィングする代わりに、ブラウザの機能を確認します。
  • あなたが言ったように、「さまざまなブラウザ、画面、ビューポートのサイズにコンテンツを適応させる単一のWebサイト」として、できる限り設計してください。言うは易く行うは難しですが、前進する道です...
  • 対象ユーザーにとって意味のある修正を適用することで、この方法ではできないことを管理します。(IE の条件付きコメントのように、iOS や Android には適用されない可能性がありますが、そこで停止する理由は :)

見つけることができる多くのリソースがあります。以下のキーワードで検索してください。「CSS メディア クエリ」、「流動的なレイアウト」、「レスポンシブ デザイン」、...

于 2013-03-09T16:36:54.627 に答える
1

HTML5 メディア クエリを使用すると、さまざまなビューポートなどでコンテンツを表示および非表示にすることができるため、同じ HTML ソース コードを維持しながら、さまざまな CSS スタイル シートをリンクすることで視覚的な追加性を調整できます。私は使用する傾向があります：

<!-- MOBILE DEVICES -->
<link href="CSS/basic.css" rel="stylesheet" media="screen and (max-device-width: 767px)" />
<!--ANDROID MOBILE FIX-->
<link href="CSS/basic.css" rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" />
<!-- TABLET DEVICES -->
<link href="CSS/tablet.css" rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width: 1024px)" />
<!--DESKTOP DEVICES -->
<link href="CSS/desktop.css" rel="stylesheet" media="screen and (min-device-width: 1025px)" />

これはCSS3 メディア クエリのチュートリアルです。

于 2013-03-09T16:49:43.277 に答える
0

画面サイズに応じてサイズが変化する流動的/流動的なWebサイトレイアウト（画面の幅/高さのパーセンテージに基づく）を常に作成するようにしてください。

この「アニメーションコンテンツ」に固定サイズの要素がある場合は、Androidタブレットでこれを補うために、側面に黒いバーを追加する可能性があります。

Bootstrapのような一部のフロントエンドフレームワークは、すべての流動性を処理します。

于 2013-03-09T16:38:11.720 に答える