0

免責事項:これらの種類の質問が殺到していることは知っていますが、特定のケースに役立つものを見つけることができませんでした.

レスポンシブ スタイルを使用できないモバイル Web アプリを実行しています (= パーセントや em などでサイズを定義します)。すべてがピクセルパーフェクトである必要があります。これまでのところ、幅640 ピクセル(Retina) のレイアウトを作成しました。ターゲット プラットフォームは、小型の iOS デバイス (iPhone、iPod touch)、Android フォン、および Windows Phone です。追加のプラットフォームはグレイビーですが、「公式に」サポートされていません。

開発者ツールを介してユーザーエージェントを偽造すると、デスクトップ Chrome で見事に見えます。ただし、実際のモバイル デバイスでテストすると、スケーリングはプラットフォームごとに異なる方法で機能します。Android は横スクロールを誘発するようであり、Windows Phone についてはあまり語られないほど良い。私は現在、それをテストするための iPhone を持っていません。

私が望むのは、幅 640 ピクセルのレイアウトをデバイスの幅に合わせてスケーリングすることです。ユーザーは横にスクロールできてはならず、ピンチしてズームできてはなりません。すべての意図と目的において、ネイティブ アプリのように見える必要があります。

SO や他のサイトで見つかった回答に従ってさまざまな変更を試みましたが、現在使用しているビューポート メタ タグはそのように見えます。

<meta content='width=640, target-densityDpi=device-dpi, initial-scale=0.5, maximum-scale=0.5, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=640, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />

私が収集したところによると、Android にはスケール番号に何らかの問題があります。

どうすれば私が望むものを達成できますか? 私はすでにユーザー エージェントのスニッフィングを行っているので (汚いことはわかっています)、モバイル OS 固有のメタタグには問題ありません。

ほとんどのアプリはまだ完成していないので、モバイル OS 固有の CSS も作成する可能性があります。ただし、OS/解像度ごとに個別のスタイルシートを維持することは非常に非現実的です。

4

1 に答える 1

0

これが機能しない理由はinitial-scale=0.5、640 のドキュメント幅が 320 に歪むことを意味しないためです。むしろ、これはページがロードされたときにユーザーに表示される最初のズーム レベルを示します。

DOM の幅を 320px に変更し、initial-scaleプロパティを に設定することをお勧めします1。レイアウト全体を「網膜」にしたい場合は、各要素を個別に処理する必要があります。たとえば、300x200 の画像が網膜上でぼやけて見える場合、CSS を介してこれを処理できます。

@media  only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/1),
    only screen and (min-device-pixel-ratio: 1.5),
    only screen and (min-resolution: 1.5dppx) {

    img { background-image: url('image@2x.png'); background-size: cover; }
}

この例image@2x.pngでは、サイズは 600x400 です。

これがお役に立てば幸いです。より的を絞ったアドバイスが必要な場合は、リンクまたは特定のコード例を投稿してください。

于 2013-07-22T18:06:47.123 に答える