2

Opera Mobile の Web ページをデザインしています。左右隅に小さなズーム アイコンがあります。www.opera.com にアクセスすると、このアイコンが非表示になり、ズーム レベルが固定されます。他の Web ページの場合は表示され、ページをズームインおよびズームアウトできます。私のページでも同じ固定ズーム動作が必要です。おそらくいくつかのcssプロパティです。どのプロパティをどのオブジェクトに設定する必要があるか知っていますか? それとも、これを達成する別の方法があると思いますか。

ありがとうございました。

4

1 に答える 1

2

「ビューポート」メタタグを使用して、ページの幅を指定しているようです。これはおそらく、Mobile Operaが利用可能なScren幅よりも小さいため、ズームボタンは必要ありません。

Opera.com のモバイル版で使用されているタグは次のとおりです。

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

ページがスケーリングされないようにするには、タグを次のように設定します。

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

ユーザーがスケーリングしないようにすることは、UI に関しては私の最初の選択肢ではありません。

Opera 開発者サイトでは、このタグのサポートについて説明しています。

ビューポート メタ タグ

ビューポート メタ タグには、ビューポートが含まれている HTML ページを表示するためのビューポートの優先設定に関する情報が含まれています。他のメタ タグと同じように、viewport は HTML ページの head 要素内に配置されます。ビューポートをサポートするブラウザーは、この情報を使用して、そのデバイスにより適切に Web ページを表示しますが、単純に無視しないブラウザーではありません。もともとは iPhone での Web ページの表示方法を改善するために Apple によって作成されましたが、さまざまなモバイル デバイスの表示情報を最適化する優れた方法であるため、Opera Mobile 9.5 でサポートを追加しました。タグは次のようになります。

<meta name = "viewport" content = "幅 = デバイスの幅、高さ = デバイスの高さ" />

含まれているのは、これがビューポート メタ タグであることを指定する meta 属性と、このページに指定するさまざまな値のコンマ区切りリストを含む content 属性だけです。指定できるさまざまな情報は次のとおりです。

  • 幅と高さ: これらは、この Web ページのビューポートに設定する幅と高さを指定します。値はピクセル単位で設定するか、device-width 値と device-height 値をそれぞれ使用して、幅と高さをデバイスの画面の幅と高さ全体として設定する必要があることを指定できます。幅のデフォルト値は 980 ピクセルで、200 から 10,000 ピクセルまで設定できます。高さのデフォルト値は、デバイスの幅とその縦横比から計算され、223 から 10,000 ピクセルまで設定できます。
  • initial-scale: これは、Web ページが最初に表示されるときの初期スケールを設定します。デフォルトでは、意図的に別の設定をしない限り、デバイスの画面全体に表示されます。
  • minimum-scale および maximum-scale: これらは、ユーザーがズームインおよびズームアウトできる最小量および最大量を指定します。これらの値は乗数です。minimum-scale のデフォルト値は 0.25 で、その値の範囲は 0 のすぐ上から 10.0 までです。maximum-scale の値は、0 のすぐ上から 10.0 までの範囲にすることもできます。
  • user-scalable: ユーザーがズームインおよびズームアウトできるかどうかを指定します。可能な値は yes と no で、yes がデフォルトです。

Opera Mobile 9.5 はビューポート メタ タグを完全にサポートしており、注目すべき特定の動作がいくつかあります。ズームはユーザーが常に利用できるブラウザ機能であると考えているため、ユーザーがスケーリングできる最小スケールと最大スケールは無視されます。また、ページの head セクションに viewport メタ タグが存在することは、作成者がモバイル向けに最適化を行っていることを示しているため、小さな画面のレンダリングは適用されません。つまり、ビューポート対応のページは、「モバイル ビュー」がオンでもオフでもまったく同じように表示されます。

iPhone などの単一のデバイスに対して、幅と高さの値をハードコーディングしないことをお勧めします。代わりに、これらの値を device-width と device-height に設定して、ページが VGA、QVGA、WVGA、および WQVGA デバイスでも適切に動作するようにする必要があります。

于 2009-08-26T21:09:37.263 に答える