HTML メタビューポート属性の詳細な説明

HTML メタビューポート属性の詳細な説明
ビューポートとは

モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィンドウは通常、画面よりも幅が広くなっています。このため、各 Web ページを小さなウィンドウに押し込む必要がなくなります (モバイル ブラウザ用に最適化されていない Web ページのレイアウトが崩れる恐れがあります)。ユーザーは、パンやズームによって Web ページのさまざまな部分を表示できます。 Safari のモバイル バージョンでは最近、ビューポート メタ タグが導入され、Web 開発者はビューポートのサイズとズームを制御できるようになりました。他のモバイル ブラウザーも基本的にこれをサポートしています。

ビューポートの基本

モバイル向けに最適化されたページでよく使用されるビューポート メタ タグは次のようになります。

<meta name=”viewport” content=”width=デバイス幅、初期スケール=1、最大スケール=1″>

width: ビューポートのサイズを制御します。600 などの値、またはデバイスの幅 (ズームが 100% の場合の CSS ピクセル単位) である device-width などの特殊な値を指定できます。
height: 幅に対応して高さを指定します。
initial-scale: 初期ズーム比、つまりページが初めて読み込まれたときのズーム比。
最大スケール: ユーザーがズームできる最大スケール。
minimum-scale: ユーザーがズームできる最小スケール。
ユーザースケーラブル: ユーザーが手動でスケールできるかどうか

ビューポートに関するいくつかの質問

ビューポートは iOS 固有の属性ではなく、Android や Windows Phone にも存在します。彼らが解決しようとしている問題は同じで、デバイスの実際の解像度を無視し、dpi を通じて物理サイズとブラウザ間の解像度を直接リセットすることです。この解像度はデバイスの解像度とは何の関係もありません。たとえば、3.5 インチ 320 * 480 の iPhone 3gs、3.5 インチ 640 * 960 の iPhone 4、または 9.7 インチ 1024 * 768 の iPad 2 を使用する場合、デバイスの解像度と物理的なサイズは異なりますが、ビューポートを設定することで、ブラウザーで同じ解像度にすることができます。たとえば、Web サイトの幅が 800 ピクセルの場合、ビューポートの幅を 800 に設定すると、3 つの異なるデバイスで Web サイトが完全に表示されます。

ビューポートについて少しでも知識のある人なら、上記の知識は理解しているはずだと私は信じています。これは私が今日話したい点ではありません。ここで説明したいのは、iOS と Android のビューポート パフォーマンスの違いです。

ビューポートについてインターネットで簡単に検索すると、基本的に次の情報がすべて得られます。

<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、最小スケール=1.0、ユーザースケーラブル=いいえ" />

このコードは、ビューポートの幅が物理デバイスの実際の解像度に等しく、ユーザーがズームできないことを意味します。主流のウェブ アプリはすべてこのように設定されています。その機能は、実際にはビューポートを意図的に放棄し、ページを拡大縮小しないことです。この方法では、dpi はデバイスの実際の解像度と同じである必要があります。拡大縮小を行わないと、ウェブ ページはより繊細に見えます。 Photoshop に詳しい人なら、1000 × 1000 の写真をそのまま 500 × 500 に拡大するとどうなるか、ご存じですよね?画像の歪みを避ける方法はありません。

しかし、私が作りたいアプリケーションは正反対です。ビューポートとズームを使用する必要があります。実際の解像度や物理的なサイズに関係なく、ユーザーがズームできないようにして、ブラウザで均一な解像度を実現したいと考えています。テストに使用したデバイスは、iPhone 4、iPad 2、HTC G11、メーカー不明のAquos Phone (Android システム)、Asus Android Pad、Dell Win Phone ですが、その途中で次のような問題が発生しました。

1) ビューポートが明示的に設定されていない場合、デフォルトの幅は 980 になります。ページ上のすべての要素の幅が 980 未満の場合、幅は 980 になります。ページの最も広い位置が 980 を超える場合、幅は最大幅と同じになります。つまり、ページ全体をデフォルトで左から右に表示できます。ビューポートが設定されている場合、たとえば、<meta name="viewport" content="user-scalable=no" /> のように、user-scalable=no のみが設定されていると、iOS では幅が 980 として表示されます (つまり、デフォルトで dpi で拡大縮小されます)。ただし、Android および Windows Phone では拡大縮小されなくなり、ブラウザーの解像度は実際に設定されている解像度と一致します。

2) iOS デバイスの場合、幅の設定は有効になりますが、Android デバイスの場合、幅の設定は有効になりません。 iOS デバイスでは、設定した幅と実際に設定した解像度に基づいて、拡大縮小率 (dpi) が自動的に計算されます。ただし、Android では、幅の設定は無効です。設定できるのは、特別なフィールド target-densitydpi です。target-densitydpi の詳細については、次の記事を参照してください: http://hi.baidu.com/j_fo/blog/item/748361279ebccd18908f9d7d.html。つまり、ブラウザの幅、デバイスの実際の幅、dpi の 3 つの変数があります。 それらの関係を表す式を簡単に使用してみましょう (実際の関係ではなく、説明を簡単にするため)。デバイスの実際の幅 * dpi = ブラウザの幅。ここでの 3 つの変数のうち、デバイスの実際の幅は操作できない既知の値です。他の 2 つの変数については、一方を設定すると他方に影響します。iOS では、ブラウザの幅を変更でき、dpi は自動的に生成されます。Android では、dpi を変更でき、ブラウザの幅は自動的に生成されます。 Android の場合、幅をどのように設定してもブラウザの幅には影響しません。

P.S.: ここで、別の奇妙な問題についてお話ししたいと思います。HTC の G11 (私はこの HTC 電話機を 1 台しか持っていないので、他の電話機はテストしていません) では、幅を明示的に設定せずに DPI を設定すると、user-scalable=no は有効になりません。つまり、<meta name="viewport" content="target-densitydpi=300,user-scalable=no" /> となり、ユーザーが画面を拡大または縮小するのを防ぐことができません。幅の値を明示的に設定する必要があります。この値は Android のブラウザ解像度画面には影響しませんが (iOS には影響します)、設定する必要があり、この値は 320 より大きくする必要があります。320 以下の場合、user-scalable=no は有効になりません。この問題は HTC の G11 電話でのみ発生し、Aquos Phone では発生しません。 Android との互換性は本当に頭痛の種です @_@、将来どれだけ落とし穴があるかわかりません。 Windows Phone では、結果はさらに奇妙です。ビューポートの幅を 480 より大きい値に設定すると、user-scalable=no は無効になりますが、480 未満の値に設定すると、user-scalable=no が有効になります。しかし、ビューポートの幅にどのような値を設定しても、winphone の実際の表示幅に期待どおりの効果はなく、target-densitydpi も効果がありません。幅を480未満にすると画面が拡大縮小されるのですが、縮小率が思っていたものと全然違います。どのようなルールで拡大縮小されるのかわかりません。これが Winphone の問題なのか、Dell の実装の問題なのかはわかりません。

3) この項目は前の項目に直接関連しています。iOS デバイスは、画面が横長モードまたは縦長モードの場合、DPI を自動的に調整します。横長モードまたは縦長モードのどちらであっても、ブラウザの幅はビューポートで設定された値と同じになります。したがって、画面が横長モードまたは縦長モードの場合、ページに表示されるコンテンツのサイズは自動的に拡大縮小され、変更されます。ただし、Android スマートフォンが横向きまたは縦向きモードの場合、DPI は変更されず、画面が横向きまたは縦向きモードのときに Web ページは拡大縮小されません。このため、iOS では、ページに水平方向と垂直方向の両方でスクロール バーが表示されず、全画面で表示されることを保証できますが、Android ではこれを保証できません。ページが水平方向に画面いっぱいに表示される場合、垂直方向に画面いっぱいに表示されることはなく、その逆も同様です。

4) iOS デバイスの場合、幅が定義されていて、ページの最も広い部分が幅を超えると、幅は無効になり、ページは最も広い幅で表示されます (スクロールバーなし)。しかし、この時点で非常に奇妙な問題が発生します。携帯電話の画面を横向きと縦向きに数回切り替えると、ページが自動的に拡大され、スクロール バーが表示されますが、拡大された幅は実際には設定した幅とは何の関係もありません。これを防ぐには、幅をページの最も広い部分と同じかそれより大きく設定する必要があります。

<<:  CSS3を使用してプログレスバー効果を実現し、動的にパーセンテージを追加する

>>:  Docker で TLS と CA 認証を有効にする方法

推薦する

Dockerfile を使用して Node.js サービスをデプロイする方法

Dockerfileを初期化するプロジェクトの名前が express であると仮定して、expres...

Mac 環境での Nginx 構成とローカル静的リソースへのアクセスの実装

ローカル開発では、直接アクセスできない静的ファイル リソースのデバッグが必要になる場合があります。こ...

Vueはローカルストレージの追加、削除、変更機能を実装します

この記事では、ローカルストレージの追加、削除、変更を実装するためのVueの具体的なコードを例として紹...

MySQL で結合を使用して SQL を最適化する方法の詳細な説明

0. 以下のテストに関連する表を準備する関連するテーブル作成ステートメントについては、https:/...

js データ型とその判定方法の例

js データ型基本データ型: 数値、文字列、ブール値、未定義、null、シンボル、参照データ型: オ...

Mysql テーブルで利用可能な最小 ID 値を照会する方法

今日、研究室のプロジェクトを見ていたとき、私にとって「難しい」問題に遭遇しました。実は、それは私があ...

Linux システム構成 (サービス制御) の詳細な紹介

目次序文1. システムサービス制御1. システムctl 2. ターゲット3. 共通システムサービス4...

Trash-Cli: Linux のコマンドラインごみ箱ツール

ゴミ箱は Linux ユーザー、Windows ユーザー、Mac ユーザーにとって非常に一般的なので...

MySQL の最初のインストールが成功した後にパスワードを初期化する手順

ファイルをディレクトリに解凍しますこれは解凍後のディレクトリですmy.iniファイルを入力しますダブ...

WeChat公式アカウントでReactプロジェクトを実行する方法

目次1. a タグを使用して PDF をプレビューまたはダウンロードします。書き方は、携帯電話でクリ...

最も完全な 50 の MySQL データベース クエリ演習

このデータベース クエリ ステートメントは、インターネット上の 50 個のデータベース クエリ練習問...

Reactのコンポーネント作成方法のまとめ

目次1. 関数を使用してコンポーネントを作成する2. クラスを使用してコンポーネントを作成する3. ...

Docker での Jenkins と Docker を使用した継続的デリバリー

1. 継続的デリバリーとは何かソフトウェア製品の出力プロセスは、ソフトウェアがいつでもリリースできる...

Linux で Bash コマンド プロンプトをカスタマイズする方法

序文ご存知のとおり、bash (Bourne-Gain Shell) は、ほとんどの Linux デ...