WebKitからtarget-densitydpiのサポートが削除されました。

Question

このhttps://bugs.webkit.org/show_bug.cgi?id=88047によれば、WebKitはviewport paramsからtarget-densitydpiのサポートを削除しました。残念ながら、バグの説明には、変更の動機も回避策も記載されていません。

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

さて、このコードは、クロム（21.0.1180.49ベータメートルでテスト）中にエラーが出力さ：モバイルデバイスでのスケーリングを防止したい

特定のウェブページには、ビューポートの次の宣言を持っていました。 Webページを作成してエラーメッセージを表示せずに、target-densitydpi = device-dpiを使って以前と同じ動作をする方法をアドバイスしてください。

Answer 1

webkit-devメーリングリストのスレッドhttp://lists.webkit.org/pipermail/webkit-dev/2012-May/020847.htmlには、要するに、WebKitには、デバイス上でレンダリングされたときにページを拡大縮小する手段がいくつかありましたが、これは非常に混乱していました（それぞれのプラットフォームが独自のアプローチこれまで）

UPDATE：。

アダム・バース、言及したパッチ作者による言っスレッドにコメントによると

、

あり目標densitydpiが は、Androidにバンドルされているいくつかのアプリで使用されていることをいくつかの懸念がありますが、人々は廃止して喜んで表示され

反応画像とCSSデバイスユニットなど、他のメカニズムを使用してこれらのアプリを移行することができます。

ご覧のとおり、応答イメージとCSSデバイスユニットは、target-densitydpi属性で提供されているものの推奨される「回避策」のようです。また、同じスレッドに関する別のコメントは、この属性が設定されていても、属性をサポートしていないブラウザ環境では、同じページを別の方法で再実装する必要があるという事実を述べました。

最近導入されたsubpixel layoutは、属性削除の問題を緩和するもう1つの手段になると思います。

UPDATE 2

This blog postは、Android、Chrome版ページをレイアウトする別の方法を提案しています。自動的にあなたのページの「同じ挙動を保つ」ことを可能にする回避策はありません。あなたはそれらを少し再構築する必要があります。

Answer 2

minimum-scaleを追加しましたか？残念ながら、私はアンドロイドの携帯電話を持っていないので、私はあなたのためにそれをテストすることはできません。

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

Answer 3

私はわからないんだけど、多分それは「物理的な」ピクセルの画面幅に等しくなるようにビューポートのメタタグで「幅」を設定することにより、target-densitydpiをエミュレートすることが可能です。残念ながら、私の知る限り、ほとんどのアンドロイド（James Pearce: First, Understand Your Screen）で動作するはずです

<meta name="viewport" id="metaViewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
<script> 
if(navigator.userAgent.toLowerCase().indexOf('android') > -1) 
    document.getElementById('metaViewport').setAttribute('content', 'width='+screen.width+', initial-scale=1.0, maximum-scale=1.0, user-scalable=no'); 
</script> 

ようには100％のデバイスピクセル幅を取得する方法が、何かがありません。

Answer 4

が、私はこのjQueryのを使用したAndroid向けの最新のChromeで同じことを達成：

<meta content='user-scalable=no, initial-scale=1, width=device-width' id='viewport' name='viewport'> 

var viewPortScale = 1/window.devicePixelRatio; 

$('#viewport').attr('content', 'user-scalable=no, initial-scale='+viewPortScale+', width=device-width'); 

をこれが1つのCSSピクセル== 1つのデバイスピクセルの正しいスケールに設定し、最初のスケールのビューポートメタタグを設定します。

screen.widthで物理ピクセルのサイズが返されないため、 'width =' + screen.widthは使用できません。私はhttp://responsejs.com/labs/dimensions/をChromeのNexus 7で試してみましたが、すべての数字はビューポートピクセルです。