target-densitydpi



Target Densitydpi



画面のピクセル密度は、画面の解像度によって決まります。通常、1インチあたりのドット数(dpi)として定義されます。 Androidは、低ピクセル密度、ピクセル密度、高ピクセル密度の3つの画面ピクセル密度をサポートしています。 1インチあたりの画面ピクセル数が少ないと、高ピクセル密度の画面では1インチあたりのピクセル数が多くなります。 AndroidブラウザとWebViewのデフォルト画面はピクセル密度です。

以下はtarget-densitydpiプロパティの範囲です



  • device-dpi-デバイスの元のターゲットdpを使用したdpi。デフォルトのズームは発生しません。
  • high-dpi-ターゲットdpiとしてhdpiを使用します。中程度のピクセル密度および低密度のピクセルに対応する縮小装置。
  • medium-dpi-ターゲットdpiとしてmdpiを使用します。増幅デバイスに対応する高ピクセル密度、デバイスのピクセル密度はそれに応じて減少した。これはデフォルトのターゲット密度です。
  • low-dpi-ターゲットdpiとしてmdpiを使用します。増幅に対応する平均ピクセル密度および高ピクセル密度デバイス。
  • -この値の範囲のターゲットdpidpiは70〜400である必要があるため、特定の値を指定します。

一般に、次の方法でアダプティブレイアウトを実現できます。

  • フローレイアウトの使用(流体グリッド)
  • 別のロードCSSを選択するための画面のサイズに応じて
  • CSSの@mediaルールを使用する

ここでは、WebApp(またはモバイルブラウザ)に適応する固定幅のページを導入する方法を説明します。たとえば、主に携帯電話で表示するために使用される小さいページ幅640pxを設計しましたが、電話の画面解像度が高すぎて、各電話に適応できません。どうすればよいですか?



まず、頭に追加します。

<head> <meta name='viewport' content='width=device-width, user-scalable=no'> head>

これは、デバイス画面の幅と一致するビューポートの幅を表し、ズームを無効にします。これには2つの概念が含まれます。

  • ビューポート要素
  • devicePixelRatio:のデバイスの物理ピクセルとピクセル比に依存しないデバイス(デバイスに依存しないピクセル(ディップ))。

iPhoneの携帯電話とAndroid4.0以上の電話は、ビューポートのスケール変更ケースページを変更するための幅をサポートしているため、 幅はページデザインの幅として指定できます 、このように、ページは拡大縮小せずにビューポートとフルスクリーン表示でいっぱいになります。例えば:



<meta name='viewport' content='px, user-scalable=no'>

ただし、次の電話android 4.0では、ビューポート幅の設定はサポートされていませんが、 同じ目的を達成するために、Androidパラメーターを別のtarget-densitydpiに提供することができます 、Target-densitydpiの式は次のとおりです。

target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160 // UI-width: WebApp layout width // device-width: screen resolution width

その後、 最終的解決 次のように:

<meta name='viewport' content='target-densitydpi=device-dpi, px, user-scalable=no'> $(function () { var DEFAULT_WIDTH = 640, // default width of the page ua = navigator.userAgent.toLowerCase(), // Get the browser information based on the user agent information deviceWidth = window.screen.width, // the width of the device devicePixelRatio = window.devicePixelRatio || 1, Individual pixels and pixel ratio // physical devices, default 1 targetDensitydpi // Android4.0 the phone does not support width viewport, we need to set the target-densitydpi if (ua.indexOf('android') !== -1 && parseFloat(ua.slice(ua.indexOf('android')+8)) <4) { targetDensitydpi = DEFAULT_WIDTH / deviceWidth * devicePixelRatio * 160 $('meta[name='viewport']').attr('content', 'target-densitydpi=' + targetDensitydpi + ', width=device-width, user-scalable=no') } // TODO: Other phones require special handling below })

問題

  • 現在、AndroidとiOS / iPadの携帯電話のみをテストしています
  • アンドロイドの下では、Firefox Androidバージョンを使用して検出することはできません、あなたはFirefoxを無視することしかできません