基本原則とビューポートの詳細な使用方法

通常、モバイルブラウザーは、画面よりも広い仮想ウィンドウにページをレンダリングします。この仮想ウィンドウはビューポートです。目的は、ユーザーに完全に表示できるように、通常、モバイル端末に適応していないWebページを表示することです。モバイルデバイスを使用してデスクトップWebページにアクセスすると、水平スクロールバーが表示され、ここのディスプレイ領域の幅が表示されます。

定期的に、ページをスケーリングできる場合は、次のコードを使用します

<Meta name = viewport content = width = device-width、initial-scale = 1 />

ズームインしたくない場合は、次のコードを使用してください

<meta name = viewport content = width = device-width、initial-scale = 1.0、minimut-scale = 1.0、maximing-scale = 1.0、user-scalable = no>

デスクトップWebページを開発する場合、CSSの1pxはデバイスで1pxです。ただし、CSSの1pxは単なる抽象値であり、実際のピクセルを表していません。モバイルデバイスでは、異なるデバイスのピクセル密度は異なり、CSSの1pxは実際のデバイスのピクセル値に等しくない場合があります。また、ユーザースケーリングは、CSSを表すデバイスピクセル1pxの数も変更します。この比率はdevicepixelratioです

物理ピクセル/独立ピクセル= devicepixelratio

Browserとprint window.devicePixelratioをコンソールにズームインして、DevicePixelratioのサイズを確認できます。その中の独立したピクセルは、CSSのPXとして理解できます。

コード：

<Meta name = viewport content = width = device-width、initial-scale = 1、maximum-scale = 1>

以下は、ビューポートのいくつかの特性です。これらのプロパティは、混合方法で使用できます。複数のプロパティは、同時にコンマで分離する必要があります。ここでは、理想的な状況下でのビューポートを指す理想的なビューポートと呼ばれる概念を拡張します。ユーザーのスケーリングや水平スクロールバーなしで通常、Webページのすべてのコンテンツを表示でき、すべてのテキストをはっきりと表示できます。このテキストがCSSで定義されていても、表示されると明確に見ることができます。

1.幅と初期スケール

幅と初期スケールが設定されると、ブラウザは適応の最大値を自動的に選択します。資産：

<Meta name = viewport content = width = 400、initial-scale = 1>

ブラウザは、適応する大き​​な値を選択します。現在のウィンドウの理想的なビューポートの幅が300で、初期スケールの値が1の場合、幅の値は400になります。現在のウィンドウの理想的なビューポートが480の場合、480が選択されています。

実際、width = device-width and initial-scale = 1はどちらも理想的なビューポートの適用を表していますが、iPadやiPhoneなどのモバイルデバイスでは、水平面と垂直画面は区別されず、垂直画面の幅はデフォルトで使用されます。互換性を書く最良の方法はです

<Meta name = viewport content = width = device-width、initial-scale = 1>

2。属性を動的に変更します

a。 document.write（）

document.write（ '<meta name = viewport content = width = device-width、initial-scale = 1>'）

B.セットアトリブ

var mvp = document.getElementById（ 'testViewport'）;

mvp.setattribute（ 'content'、 'width = 480'）;

通常、モバイルブラウザーは、画面よりも広い仮想ウィンドウにページをレンダリングします。この仮想ウィンドウはビューポートです。目的は、ユーザーに完全に表示できるように、通常、モバイル端末に適応していないWebページを表示することです。モバイルデバイスを使用してデスクトップWebページにアクセスすると、水平スクロールバーが表示され、ここのディスプレイ領域の幅が表示されます。

デスクトップWebページを開発する場合、CSSの1pxはデバイスで1pxです。ただし、CSSの1pxは単なる抽象値であり、実際のピクセルを表していません。モバイルデバイスでは、異なるデバイスのピクセル密度は異なり、CSSの1pxは実際のデバイスのピクセル値に等しくない場合があります。また、ユーザースケーリングは、CSSを表すデバイスピクセル1pxの数も変更します。この比率はdevicepixelratioです

物理ピクセル/独立ピクセル= devicepixelratio

Browserとprint window.devicePixelratioをコンソールにズームインして、DevicePixelratioのサイズを確認できます。その中の独立したピクセルは、CSSのPXとして理解できます。

典型的なモバイル最適化されたサイトには、次のようなコンテンツが含まれています。

<Meta name = viewport content = width = device-width、initial-scale = 1、maximum-scale = 1>

以下は、ビューポートのいくつかの特性です。これらのプロパティは、混合方法で使用できます。複数のプロパティは、同時にコンマで分離する必要があります。ここでは、理想的な状況下でのビューポートを指す理想的なビューポートと呼ばれる概念を拡張します。ユーザーのスケーリングや水平スクロールバーなしで通常、Webページのすべてのコンテンツを表示でき、すべてのテキストをはっきりと表示できます。このテキストがCSSで定義されていても、表示されると明確に見ることができます。

1.幅と初期スケール

幅と初期スケールが設定されると、ブラウザは適応の最大値を自動的に選択します。資産：

<Meta name = viewport content = width = 400、initial-scale = 1>

ブラウザは、適応する大き​​な値を選択します。現在のウィンドウの理想的なビューポートの幅が300で、初期スケールの値が1の場合、幅の値は400になります。現在のウィンドウの理想的なビューポートが480の場合、480が選択されています。

実際、width = device-width and initial-scale = 1はどちらも理想的なビューポートの適用を表していますが、iPadやiPhoneなどのモバイルデバイスでは、水平面と垂直画面は区別されず、垂直画面の幅はデフォルトで使用されます。互換性を書く最良の方法はです

<Meta name = viewport content = width = device-width、initial-scale = 1>

2。属性を動的に変更します

a。 document.write（）

document.write（ '<meta name = viewport content = width = device-width、initial-scale = 1>'）

B.セットアトリブ

var mvp = document.getElementById（ 'testViewport'）;

mvp.setattribute（ 'content'、 'width = 480'）;

さて、この記事はあなたに紹介されました。独自のテストニーズに応じて選択できます。一般的に、PCと携帯電話は適応性なしに使用でき、スケーリングをサポートしません。携帯電話にジャンプすると、影響を与えることなくスケーリングできます。