[解決済み] Android H5でtarget-densitydpiとwindow.innerWidthの関係を教えてください。

質問

私のgenymotionエミュレータは、Google Nexus7 -4.1.1 API16- 800 * 1280です。 Androidでwebviewを使ってHTML5を読み込む際、target-densitydpiとwindow.innerWidthの関係で混乱しました。

<meta name="viewport" content="width=device-width,**target-densitydpi=device-dpi**,initial-scale=1.0,minimum=1.0,maximum-scale=1.0,user-scalable=no">

$(function(){alert(window.innerWidth);   //get the viewport width
          alert(window.devicePixelRatio);})  //  always is 1.3312499523162842  no matter what target-densitydpi is

いくつかのテストをする。

                                   window.innerWidth

**target-densitydpi=device-dpi:** 800

**target-densitydpi=low-dpi:** 452

**target-densitydpi=middle-dpi:** 602

**target-densitydpi=high-dpi:** 909

**ignore target-densitydpi:** 602

window.inerWidthの計算方法について教えてください。window.devicePixelRatioと何か関係があるのでしょうか？ ありがとうございます。

どのように解決するのですか？

を使用することは避けなければなりません。 target-densitydpi 可能であれば この属性は非標準であり、Android WebViewの最新バージョンでは実際に非推奨となっています。

大まかには target-densitydpi は、CSS のピクセルと画面のピクセルの比率を表すスケーリング係数を定義しています。以下のように計算されます。

• について device-dpi として、1 / デバイススケール係数; あなたの場合。 1 / (4/3) = 0.75 ;

• について low-dpi , middle-dpi と high-dpi はデバイスの特性に依存せず、それぞれ160を120、160、240で割って算出されるため、以下のようになります。 4 / 3 , 1 と 2 / 3 ;

そして、CSSの幅は、計算された値で割ることによって拡大縮小されます。あなたの場合、CSSの幅は602になります。 (800 / 1.33124...) . また、丸め誤魔化しているため、単位がずれていることがあります。