モバイル デバイスでのビューポートの互換性の概要

モバイル デバイスのビューポートは、

レイアウト ビューポート、ビジュアル ビューポート 、および 理想的なビューポートの 3 つのカテゴリに分類されます。 理想的なビューポートはモバイルに最適ですデバイス ビューポート。理想的なビューポートの幅は、CSS で理想的なビューポートの幅 (単位は px) に設定されている限り、モバイル デバイスの画面幅と同じになります。この要素の値はデバイス画面の幅です。つまり、幅が 100% になる効果です。

理想的なビューポートの重要性は、画面の解像度に関係なく、理想的なビューポート用に設計された Web サイトは、ユーザーが手動でズームしたり水平スクロール バーを操作したりすることなく、ユーザーに完全に表示できることです。

すべての iPhone の理想的なビューポート幅は 320 ピクセルであるため、H5 ページをすべての iPhone および Android モデルに適合させる簡単かつ大雑把な方法は次のとおりです: ビューポートを設定します

meta viewport タグは、モバイル デバイスのビューポートの問題を解決するために Apple によって Safari ブラウザに初めて導入されました。その後、Android や主要なブラウザ メーカーもこれに倣い、メタ ビューポートのサポートを導入しました。これは、これが依然として非常に便利であることを証明しています。 Apple の仕様では、メタ ビューポートには次のように 6 つの属性があります (これらをコンテンツの属性と値と呼びましょう):

幅initial-scaleminimum-scalemaximum-scale高さユーザースケーラブルこれらのプロパティは、同時に、個別に、または混合して使用できます。複数の属性を同時に使用する場合は、カンマで区切ってください。

	レイアウト ビューポートの幅を正の整数として設定します。または文字列「width-device」
ページの初期ズーム値を設定します。これは、小数を使用できる数値です
user は、数値であり、小数点以下を使用できます
は、ユーザーの最大ズーム値を許可します。 は数値で、小数点以下を使用できます
	レイアウト ビューポートの高さを設定します、この属性は私たちにとって重要ではなく、めったに使用されません
ユーザーがズームを許可されているかどうか、値は「no」または「yes」です。noは許可されていないことを意味し、yesは許可されていることを意味します

以上がモバイル デバイスでのビューポートの互換性の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。