この記事は2つの部分に分かれています。最初のパートでは、クロスプラットフォームWebサイトの実現可能性について説明し、2番目の部分ではViewPortの設定方法について説明します。
クロスプラットフォームのWebサイトを開発しますか？タグの適応幅と高さに依存して、複数のサイズで普遍性を実現します！ ？ラベルの幅と高さが適応可能であることは事実です。これは非常に早くこれを行うことができます。ただし、多くの従来のPC Webサイトが幅を修正することがわかります。 （Taobaoは幅1000px、Sohu 950pxを使用しています...）Webサイトが幅と高さに適応できるようにしないのはなぜですか？それは、ブラウザによってラベルの幅を任意に伸ばすと、非常に貧弱な体験につながるためです。ブラウザが100pxにスケーリングされると、左のバーが麺に変わることを望まないからです。また、ブラウザが過剰に伸びている場合、あなたのウェブサイトを小学生向けのネットブックのように見せたくありません。したがって、ラベルの適応に頼ってクロスプラットフォームを達成することは非現実的であり、ユーザーエクスペリエンスを犠牲にしています。多くの場合、幅と高さを修正する必要があります。
html5/"> html5デバイスの検出に頼って、レスポンシブWebサイトを構築してください！HTML5デバイスに依存して、現在のデバイスが携帯電話かタブレットかを確認し、それに応じて対応するCSSをロードします。たとえば、デバイスがタブレットであることを検出した場合、3つの列を水平に表示できます。携帯電話の場合、1つの列のみを表示します。これは難しくないように聞こえますが、実装するのは非常に複雑です。さまざまなデバイス用の複数のテンプレートセットを開発するだけでなく、画像のサイズを処理する必要があります。この点で、ボストングローブがHTML5を使用してレスポンシブデザインを実装する方法を確認できます。
一般に、クロスプラットフォームのWebサイトを達成することは高すぎて、ほとんどのWebサイトでは制限されています。それが実行可能かどうかは、ウェブサイトの実際の状況によって異なります。
ビューポートとウェブサイトのサイズモバイルブラウザは、ページを仮想ウィンドウ（ビューポート）に配置します。通常、仮想ウィンドウ（ビューポート）は画面よりも広くなっているため、各Webページは各Webページを非常に小さなウィンドウに絞る必要はありません（これにより、モバイルブラウザ向けに最適化されていないWebページのレイアウトが破壊されます）。ユーザーは、パンニングとズームを通じてWebページのさまざまな部分を見ることができます。モバイルブラウザは、ViewPortのメタタグを導入し、Web開発者がViewPortのサイズとスケーリングを制御できるようにしました。
基本概念（1）CSSピクセルとデバイスピクセルCSSピクセル：主にWebページにコンテンツを描画するために使用されるブラウザで使用される要約ユニット。
デバイスピクセル：画面の最小物理単位を表示します。各DPには独自の色と明るさが含まれています。
携帯電話の画面で同等の値を持つCSSピクセルの量は固定されておらず、多くの属性に依存します。分析と要約の後、式を思いつくことができます：1 CSS Pixels =（devicePixelratio）^2デバイスピクセル（^2は正方形を意味します。devicepixelratioが何であるかなど、後で説明します）。
（2）PPI/DPIDPIとも呼ばれるPPIは、1インチあたりのピクセル数を表します。値が高いほど、ディスプレイは画像を表示できます。 （注：ここのピクセルはデバイスのピクセルを参照します。）PPIの意味を把握した後、PPIの計算方法を簡単に理解できます。最初に携帯電話画面の対角線等価ピクセルを計算し、次に対角線（携帯電話画面のサイズは携帯電話画面の斜め線の長さ）を配置する必要があり、PPIを取得できます。正確な計算の発表については、以下の図を参照できます。さらに興味深いのは、式に基づいて計算されたiPhone 4のPPIが330であり、Appleが正式に発表した326よりも少し高いことです。
同様に、HTC G7を例にとると、480*800および3.7インチの解像度が252のPPIと計算されます。
（3）密度が比率を決定します異なる密度間隔が異なるデフォルトスケーリング比に対応するため、携帯電話デバイスがどの密度間隔が属するかを知るためにPPIを計算します。これは非常に重要な概念です。
上の図から、120〜160のPPIを備えた携帯電話は低密度の携帯電話に分類され、160-240は中密度として分類され、240-320は高密度に分類され、320以上が超高密度として分類されます（Appleは上流の名前のRetinaを与えました）。
これらの密度は、特定のスケーリング値に対応しています。私たちが最もよく知っているiPhone 4または4Sを取ります。彼らのPPIは326で、これは超高密度密度の携帯電話です。幅320pxのページを書いてiPhoneに表示して表示すると、実際には全幅であることがわかります。これは、デフォルトでページが2回拡大されるため、つまり640px、iPhone 4または4sの幅は正確に640pxであるためです。
これはAndroid携帯の統計データであるため、画像は高密度タイプを丸で囲んでいます。国内のAndroid電話市場では、高密度のデバイスが市場シェアの大部分を占めています。これは非常に重要なポイントであり、Android WebAppsを実行するときに注意を払う必要がある重要なポイントでもあります。
ビューポートの使用ViewPortには、次のように合計5つの属性があります。
<メタ名= "Viewport"
content = "
height = [pixel_value | Device-height]、
width = [pixel_value |デバイスの幅]、
Inivery-scale = float_value、minimut-scale = float_value、maximing-scale = float_value、maximing-scale = float_value、
user-scalable = [yes |いいえ] 、
ターゲット-densitydpi = [dpi_value | device-dpi | high-dpi |中dpi | low-dpi] " />
これらのプロパティの中で、デバイスのデフォルトのスケーリングを変更できるTarget-DencessDPIに焦点を当てています。 Medium-DPIは、Target-DencessDPIのデフォルト値です。 Target-densityDPi = device-dpiを定義すると、デバイスは実際のDPIに従ってページをレンダリングします。たとえば、320*480の画像がiPhone 4に配置されている場合、デフォルトで画面を占有しますが、Target-DencesDPi = DVICE-DPIが定義されている場合、iPhone 4の解像度が640*960であるため、画面の4分の1（正方形の半分）のみを説明します。
解決（1）シンプルで粗野な320px幅のデザインドラフトに従ってページを作成し、設定を作成しない場合、ページはデフォルトで携帯電話の画面に等しい幅に自動的にスケーリングされます（これは、Medium-DPIがターゲットデシデンDPIのデフォルト値であり、異なる密度に対応する異なるスケーリング比によって決定されるため、すべてが自動的にモバイルデビューによって行われます）。したがって、このソリューションはシンプルでラフで効果的です。しかし、致命的な不利な点があります。高密度および超高密度のモバイルデバイスの場合、ページ（特に写真）が歪んでしまい、より密度が高いほど歪んでいます。
（2）非常に完璧ですこのソリューションでは、Target-DencessDPi = device-DPIを使用して、携帯電話デバイスが実際のピクセルに応じてレンダリングされるようにします。専門的に言えば、それは1 CSSピクセル= 1デバイスピクセルです。たとえば、640*960のiPhoneの場合、640*960のページを作成でき、iPhoneに表示されるときにスクロールバーはありません。もちろん、他のデバイスの場合、さまざまなサイズのページも必要なため、このソリューションはメディアクエリを使用してレスポンシブページを作成するためによく使用されます。このソリューションは、特定の解像度で完全に提示できますが、互換性のある解像度がより異なるため、解像度ごとに個別のコードが必要であるため、コストが高くなります。簡単な例を次に示します。
<Meta name = "Viewport" content = "ターゲットdecensientdpi = device-dpi、width = device-width" />
#header {
背景：url（medium-density-image.png）;
}
@media画面と（ - webkit -device-pixel-ratio：1.5）{
/ *高密度画面のCSS */
#header {background：url（high-dences-image.png）;}
}
@media画面および（ - webkit -device-pixel-ratio：0.75）{
/ *低密度画面のCSS */
#header {background：url（low-density-image.png）;}
（3）リーズナブルな割引Androidデバイスの大部分、高密度と中密度の特性については、妥協ソリューションを採用できます。480pxワイドデザインドラフトを復元しますが、ページシステムは320px幅（写真を削減するためにバックグラウンドサイズを使用）になり、ページを自動的にスケーリングします。このようにして、低密度の携帯電話にはスクロールバーがあり（基本的には誰もこの種の携帯電話を使用していません）、中密度の携帯電話は少しのトラフィックを無駄にし、高密度の携帯電話は完全に存在し、超高密度の携帯電話はわずかに歪んでいます（非常に高密度のアンドロイド電話はほとんどありません）。このソリューションの利点は非常に明白です。デザインドラフトのセットとコードのセットのみが必要です（ここでは、Android電話の状況についてのみ説明しています）。