0

私のデザイナーは、iPhoneとAndroidのモバイルWebサイトで動作する640wのデザインを私に手渡した。

320wの測定値を使用し、グラフィックをピクセル比に基づくメディアクエリに置き換えて、すべてをセットアップしました。これは主に、デザイン内の画像がPXディメンションで定義された要素やその他の要素の背景画像として使用されている場合の問題です。すべてのタイポグラフィのサイズをEMとして設定したため、1つの単純なメディアクエリですべてのタイポグラフィを調整できますが、アイコンとレイアウトグラフィックはまだ正しくありません。

私が遭遇している問題は、480px幅のAndroidテストデバイスがズームアウトしすぎているように見えることです。これを処理するために、メタビューポートタグのさまざまなバリエーションを使用しようとしました。以下のそれぞれは、望ましい効果をもたらさずに、独立して試されました。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densitydpi=device-dpi" />

<meta name="viewport" content="width=device-width" />

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

これは主に、デザイン内の画像がPXディメンションで定義された要素やその他の要素の背景画像として使用されている場合の問題です。すべてのタイポグラフィのサイズをEMとして設定したため、1つの単純なメディアクエリですべてのタイポグラフィを調整できますが、アイコンとレイアウトグラフィックはまだ正しくありません。

モバイルウェブは私には少しわかりにくいので、追加のメディアクエリを定義するのではなく、ビューポート設定でこれを処理する方法を見つけたいと思います。私の理解では、ビューポートメタは、わずかに異なるビューポートが市場に出るたびに新しいメディアクエリを定義することなく、複数のビューポートサイズにわたってこのタイプの問題を処理するのに役立つために存在します。

私のアプローチがオフの場合は、より良いアプローチへの参照を共有してください。流動的でかなり修正する必要のある要素が混在しているため、これは困難ですが、提案を受け付けています。

4

1 に答える 1

2

メタタグをこれらに置き換えて、それが役立つかどうかを確認してください。

<meta name="HandheldFriendly"   content="True">
<meta name="MobileOptimized"    content="320">
<meta name="viewport"           content="width=device-width, initial-scale=1, maximum-scale=1">

それらが役に立たない場合は、CSSとHTMLがどのようにレイアウトされているかを理解するためにコードを確認することが役立ちます。

于 2012-06-13T17:55:40.343 に答える