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

<<:  フレックスレイアウトは、1行あたりの固定行数と適応レイアウトを実現します。

>>:  Vue3 ミックスインの使い方

推薦する

CSS3 テキストシャドウ text-shadow プロパティの詳細な説明

テキストシャドウ text-shadow プロパティの効果: 1. 右下隅の影、左下隅の影、左上隅の...

クリックイメージ反転効果を実現するJavaScript

最近、顔コレクションに関するプロジェクトに取り組んでいましたが、フロントエンドモジュールを書いている...

Linux で MySQL をインストールして設定する

システム: Ubuntu 16.04LTS 1\公式サイトからmysql-5.7.18-linux-...

CSS3で実装された天気アイコンのアニメーション効果

成果を達成する 実装コードhtml <div class="wrapper"...

Web ページ制作におけるテーブル属性 CellPad、CellSpace、Border の説明と使用

cellspacing は表内のセル間の距離です。セルパディングは、表のセル内の空白スペースです。一...

WeChatアプレットでSVGアイコンを使用する方法

SVG は、さまざまな利点があるため、近年広く使用されています。残念ながら、WeChat ミニプログ...

LinuxシステムにTomcatをインストールし、サービスの起動とシャットダウンを構成する

Linuxシステムでサービスの起動とシャットダウンを構成する1. コマンドcd /etc/init....

XHTML CSS ページをプリンタ ページに変換する

以前は、Web ページのプリンタ対応バージョンを作成するには、印刷したときに見栄えがよくなるようにレ...

JavaScript で同時実行制御を実装する方法

目次1. 同時実行制御の概要1.1 フェーズ1 1.2 フェーズ2 1.3 フェーズ3 2. 同時実...

携帯電話向けウェブページ作成のヒント

現在では多くの人がスマートフォンを使用していることを考慮すると、モバイル Web ページの書き方は、...

ApacheBench でマルチ URL をサポートする方法

標準の ab は単一の URI でのストレス テストのみをサポートしており、実際のニーズを満たしてい...

MySQL サーバー 5.5 の接続失敗の解決策

mysqlに接続できない問題の解決方法を参考までに紹介します。具体的な内容は以下のとおりです。昨日は...

Linuxはsttyを使用して端末の回線設定を表示および変更します。

Sttty は、Linux で端末設定を変更および印刷するための一般的なコマンドです。 1. パラ...

MySQL パフォーマンス ストレス ベンチマーク ツール sysbench の使い方の紹介

目次1. sysbenchの紹介#プロジェクトダウンロードアドレス: 2. Sysbenchのインス...

ドメイン名を指定されたポートに転送するようにNginxを設定する方法

/usr/local/nginx/conf と入力する sudo cd /usr/local/ngi...