0

<'meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0, target-densitydpi=..., user-scalable=0" />'
をさまざまなデバイスでテストし、ブラウザ。両方のタブレットの物理解像度は 1280*800px です。Galaxy Tab 10" nexus 7 7".

Chrome + device-dpi
galaxy : viewportwidth 1279px、pixel ratio 1、screen.width 1280
nexus7 : vp 1279px、pr 1.3312...、sw 1280

Chrome + high-dpi
galaxy : vp 1919px、pr 1、sw 1280
nexus7 : vp 1441px 、pr 1.3312...、sw 1280

Chrome + low-dpi
galaxy : vp 959px、pr 1、sw 1280
nexus7 : vp 720px、pr 1.3312...、sw 1280


Firefox (15/19) +
galaxy : vp 1280px 、pr 未定義、sw 1280
nexus7 : vp 853px、pr 1、sw 1280

853px は 1280 * 2/3 です。

幅属性を 1280 のような個別の値に変更し、スケール境界を削除すると、両方のタブレットのビューポートが 1280 になります。幅を空白のままにするか、Vieport を「自動」に設定すると、
ギャラクシー : vp 980px、pr undefined、sw 1280
nexus7 : vpになります。 980px、pr 1、sw 1280

誰か私にそれを説明できますか？target-densitydpi は mozilla ではサポートされていません。したがって、効果はありません。そして、18 より前のバージョンの mozilla では、pixelratio は定義されていないと思いますか? 1) mozilla は、android ベースの nexus で 2/3 にスケーリングしていますか、それとも mozilla の「機能」ですか? 2) 980px はどこから来たのですか? 「auto」を幅に設定するのと同じです。しかし、両方のデバイスが 980 の viewport.width を取得するのはなぜでしょうか? W3Cのデフォルト？

4

2 に答える 2

2

980px は、Apple がビューポートを作成するために選択した数値であり、ほとんどの Web が iPhone (起動時のピクセル数がはるかに少なかった) で適切にレンダリングされます。

Android ブラウザーをターゲットにしている場合を除き (これはお勧めしません)、ビューポートの target-density は無視され、他のすべてのブラウザーではまったく使用されません (私が知る限り)。Chrome でのサポートは確実に終了したため、これを含めたり、機能することを期待したりしないでください。ビューポートでターゲット密度をサポートしている人は他になく、WebKit もそれをサポートしておらず、今後もサポートしません。

はscreen.width、(1 / devicePixelRatio) * 実際の物理幅にスケーリングされた値である別の値を報告するため、nexus 7 は 800 ピクセル (縦向きの実際のピクセル) であり、ピクセル密度は 1.33 であり、1/1.33 * 800 = に相当します。 601 CSS ピクセル。

各レンダリング エンジンは、ビューポートの処理方法が異なりますが、一貫性が増しています。Gecko に pixleRation がない場合、それは実装されていないためです。

于 2013-03-05T14:53:34.360 に答える
0

ビューポート ターゲット密度 dpi のサポートは非​​推奨です

于 2013-02-22T19:39:56.103 に答える