モバイルデバイスでのビューポートの互換性の概要-htmlチュートリアル-php.cn

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

零下一度

リリース： 2017-07-26 17:16:24

オリジナル

2041 人が閲覧しました

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

レイアウトビューポート、ビジュアルビューポート 、および 理想的なビューポートの 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は許可されていることを意味します