28

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

モバイルデバイスでのスケーリングを防止したい特定のWebページには、次のビューポートの宣言がありました。

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

現在、このコードはChromeでエラーを出力します（21.0.1180.49 beta-mでテスト済み）。エラーメッセージなしでウェブページを作成し、target-densitydpi=device-dpiで以前と同じ動作を維持するための想定される方法をアドバイスしてください。"

4

4 に答える 4

18

このjQueryを使用して、最新のChromeforAndroidで同じことを達成しました。

<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');

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

screen.widthは物理的なピクセルのサイズを返さないため、'width='+screen.widthを使用することはできません。ChromeのNexus7でh​​ttp://responsejs.com/labs/dimensions/を使用してみましたが、すべての数値はビューポートピクセルです。

于 2013-03-13T22:26:32.297 に答える
14

webkit-devメーリングリストスレッドhttp://lists.webkit.org/pipermail/webkit-dev/2012-May/020847.htmlには、機能の削除に関するディスカッション（または少なくとも背景）が含まれています。

要するに、WebKitにはデバイス上でレンダリングされたときにページをスケーリングするいくつかの手段があり、これは非常に混乱していました（各プラットフォームがこれに対する独自のアプローチに依存していたことを考えると、さらに混乱しました）。

更新：

言及されたパッチの作者であるAdamBarthによる、前述のスレッドに関するコメントによると、

target-densitydpiがAndroidにバンドルされている一部のアプリで使用されているという懸念がありますが、人々はこの機能を廃止し、 レスポンシブ画像やCSSデバイスユニットなどの他のメカニズムを使用するようにそれらのアプリを移行することをいとわないようです。

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

最近導入されたサブピクセルレイアウトは、属性削除の問題を軽減するもう1つの手段になると思います。

更新2

このブログ投稿は、AndroidChrome用にページをレイアウトする別の方法を提案しています。ページの「同じ動作を維持」するための回避策はありません。それらを少し再構築する必要があります。

于 2012-11-13T15:54:20.217 に答える
3

target-densitydpiよくわかりませんが、ビューポートメタタグの「幅」を「物理」ピクセルの画面幅と同じに設定することでエミュレートできる可能性があります。残念ながら、AFAIKでは、デバイスのピクセル幅を100％取得する方法はありませんが、

<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>

ほとんどのAndroidで動作するはずです（James Pearce：まず、画面を理解してください）。

于 2012-11-16T21:21:55.323 に答える
1

追加してみましたminimum-scaleか？残念ながら、私はAndroidスマートフォンを持っていないので、テストすることはできません。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
于 2012-11-16T19:16:28.920 に答える