web-dev-qa-db-ja.com

Androidメタビューポートのスケーリング：なにが欠けていますか？

私は、ビューポートとその中のコンテンツが、WebViewまたはネイティブブラウザーでコンテンツを描画するために使用されるビューポートメタタグによってどのように影響を受けるかを判断しようとしました。

私が遭遇したのは、明らかな矛盾です。画像とビューポートサイズを表示するためのJavaScriptを含む小さなページ（以下を参照）を作成し、画像のスケーリングを視覚的に確認し、正確な数値を取得できるようにしました。

まず、いくつかの観察：

  1. ビューポートの幅の数字は、私が期待したとおりのものではなく、近いものです。
  2. 数値がデバイスのピクセル数に近い場合、実際には1対1で描画が行われます。少なくとも、そのように見えるように見えます。
  3. ページサイズ（ドキュメントサイズ）がビューポートサイズより小さい場合、ビューポート番号は縮小します。つまり、ビューポートは常に最大の可視空間を表すとは限らず、現在の可視空間だけを表します。
  4. 同様に、ネイティブブラウザでは、ビューポートのサイズはトップバーによって調整されます。画面からスクロールするとサイズが大きくなります。指定された番号は、全画面表示用です。

デバイス＃1：物理画面は1024x600で、実行中Android 2.2。

  1. initial-scale = 1.0 => 676x400
  2. initial-scale = 1.0、width = device-width => 676x400
  3. initial-scale = 2、width = device-width => 338x200
  4. initial-scale = 2、width = device-width、target-densitydpi = device-dpi => 507x300
  5. initial-scale = 0.5、width = device-width、target-densitydpi = device-dpi => 800x473
  6. initial-scale = 0.9、width = device-width、target-densitydpi = device-dpi => 800x473
  7. width = device-width、target-densitydpi = device-dpi => 1014x600
  8. initial-scale = 1.0、width = device-width、target-densitydpi = device-dpi => 1014x600
  9. initial-scale = 0.5、width = device-width、target-densitydpi = device-dpi、minimum-scale = 0.1 => 2028x768
  10. initial-scale = 0.5、width = device-width、target-densitydpi = device-dpi、minimum-scale = 0.1、user-scalable = no => 1014x600

デバイス＃2：物理画面は800x480で、実行中Android 2.3.2。

  1. initial-scale = 1.0 => 527x320
  2. initial-scale = 1.0、width = device-width => 527x320
  3. initial-scale = 2、width = device-width => 263x160
  4. initial-scale = 2、width = device-width、target-densitydpi = device-dpi => 395x240
  5. initial-scale = 0.5、width = device-width、target-densitydpi = device-dpi => 790x480
  6. initial-scale = 1.0、width = device-width、target-densitydpi = device-dpi => 790x480
  7. initial-scale = 0.5、width = device-width、target-densitydpi = device-dpi、minimum-scale = 0.1 => 1580x768
  8. initial-scale = 0.5、width = device-width、target-densitydpi = device-dpi、minimum-scale = 0.1、user-scalable = no => 790x480
  9. width = 1580、target-densitydpi = device-dpi => 790x480
  10. width = 1580、target-densitydpi = device-dpi => 790x480
  11. width = 1580、target-densitydpi = device-dpi、minimum-scale = 0.1 => 790x480

これらの結果のうち、以下は意味をなしません。

  1. デバイス＃1、アイテム5、6、および10
  2. デバイス＃2、アイテム5、8、10、11、12

誰も意味をなさないもので何が起こっているか知っていますか？

なぜ多くの値が物理ピクセルと一致するのが10ピクセル恥ずかしがるのか誰もが知っていますか？しかし、結果は一致するかのようです？ （例：1.7および2.6）

私は何か間違ったことをしていますか、またはユーザーがスケーリングを許可され、最小スケール値が設定されていない限り、1.0を超えてズームアウトすることは不可能と思われますか？

つまり、有効な値は0.01〜10ですが、最小スケールも設定できない限り、1.0未満の初期スケール値は無視されます。

Android docs do user-scalableがnoの場合、最小/最大スケール値は無視されます。それはあまり有用ではないようです。また、2.9-2.11は、自分で計算して幅を設定することはできないことを示しているようです。

最後に、私が使用しているHTML：

<html>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<head>
    <meta name="viewport" content="initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no" />
</head>
<body style="margin:0;">
<div id="bld" class="bld" style="position:absolute; width:250px; height:125px; left:50px; background-color:#ccccff;">Hello world.</div>
<img id="bl1" src="http://commondatastorage.googleapis.com/kf6nvr/images/1024x768.png" />
<script> 
$("#bl1").click(function(){
    var pageWidth = $(document).width();
    var pageHeight = $(document).height();
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();

     $("#bld").html("Page width: "+pageWidth+"<br />pageHeight: "+pageHeight+"<br />port width: "+viewportWidth+"<br />port height: "+viewportHeight);
});
</script> 
</body>
</html>

だから...私は何が欠けていますか？

androidhtmlscaling
46
lilbyrdie

あなたがそこに開いたワームの興味深い缶。より多くのデバイスを試してみると、おそらくさらに奇妙で、ランダムなバグが発生するでしょう。興味深い時代！ :-)

あなたはあきらめたいと思うかもしれないと思うので、ただ試してみてください...

  • できるだけシンプルな設定を使用してください。
  • デバイスが報告することを選択したピクセル幅を受け入れます。
  • 適応/流体レイアウトと相対的な幅に依存して、さまざまな画面幅で動作するようにします。
  • 丸い角、影、グラデーションの解像度ニュートラルレンダリングにネイティブCSSプロパティを使用します。
  • ベクトル形式（svg、アイコンフォントなど）をできるだけ使用する
  • および（important）高解像度のborder-imagesおよびbackground-imagesを、よくサポートされている background-sizeプロパティと組み合わせて使用​​します1 物事を素敵で鮮明にする2。

1） 古いブラウザ（MSIE8など）との後方互換性を提供するには、二重のbackground-image宣言を使用する必要があります。

background-image: url(low-res.png);        /* CSS2 */
background-image: url(high-res.png), none; /* CSS3 */
background-size:  100px 10px;             /* CSS3 */

2） -webkit-max-device-pixel-ratio メディアクエリも役立ちますが、名前が示すように、Webkitブラウザーでのみ機能します。

ランブル：

新世代のAndroidとiOSデバイスには、実際のデバイスピクセルではなく、レポート CSSピクセル に頼るほどのさまざまな画面DPIがあります。これは良いか悪いかの両方-あなたがそれを見る方法に応じて。

これはbadです。これは、これまで使用していたデバイスピクセルまでのコントロールがほとんど保証されておらず、ほとんど同種の画面で作業しているためです。昔の。

一方、goodは、デザインが非常に小さくレンダリングされないため、通常の人間が読み取ったり使用したりできないことがわかっているためです。

target-densitydpi=device-dpiを使用する際の問題は、7インチ幅の800px画面では驚くほど機能しますが、4インチ幅の960px画面ではアプリケーションが完全に台無しになることです。

15
Már Örlygsson
$(document).ready(function() { 
$('meta[name=viewport]').attr('content','width=1024, user-scalable=no'); 
});

正しいスケーリングが適用された後、ユーザーのスケーリングを無効にするために動作するようです

2
Clinton Ward