web-dev-qa-db-ja.com

Androidのブラウザー用にWebサイトを最適化するためのヒントは？

Androidのブラウザ向けにウェブサイトのデザインを最適化するためのヒント、コツ、リソースを探しています。

Androidアプリを作成しています。一部の機能はウェブインターフェースからアクセスできます。

androidhtmlcssmobile-website
44
nyenyec

モバイルブラウザ向けにWebサイトを最適化するために2つの要素に依存しています（特にAndroidおよびiPhone）：

メタタグ：HandheldFriendlyおよびビューポート

通常、AndroidおよびiPhoneブラウザーはデフォルトで設定します。ページ幅をデバイス幅と同じにするには、ページ幅を800〜900ピクセルにしないようにします。次のメタタグを設定します。

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

CSSメディアクエリ

デザインをページ幅に合わせます。たとえば、大画面の場合は2列のコンテンツ、小画面および印刷の場合は1列のコンテンツがあります。したがって、メディアクエリを使用してcss-includesをメインメインcss-fileに含めます。

@import url(style-screen.css) screen;
@import url(style-small.css) print, handheld;
@import url(style-large.css) screen and (min-width: 801px);
@import url(style-small.css) screen and (max-width: 800px);
67
Daniel

私のサイトに次の2つのメタタグを追加するのに長い道のりがあったことがわかりました。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="HandheldFriendly" content="True" />

それらの詳細は次のとおりです。 http://learnthemobileweb.com/2009/07/mobile-meta-tags/

16
Dave Lancea

JQueryに関しては、モバイルブラウザ向けに最適化されたバージョンがあります。 http://jquerymobile.com/

5
Mike Chelen

dev.operaには、Androidではなく、モバイルWebサイト全般に関する記事があります。たとえば、

小さなデバイスの見栄えを良くする

実世界でのモバイルWebサイトの設計と開発

4
Zitrax

まともなAndroidリソースは知りませんが、JavaScriptに夢中になることはありません。 AndroidがiPhoneのようなものである場合、（現在の）JavaScriptのパフォーマンスは、デスクトップで使用されるよりもはるかに劣ります。

1
Paul D. Waite

すべてのモバイルWebページでは、可能な限りすべてのものがスリム化されています。

1
Peter