問題タブ [pixel-ratio]

私は自分のウェブサイトを再設計している最中であり、レスポンシブレイアウトを試してみることにしました。私はCSS3メディアクエリを初めて使用し、スマートフォンでサイトを意図したとおりに動作させる方法を理解できません。

このページには現在、次のビューポートメタタグがあります。

HTMLにこれがある場合とない場合の違いがわからないため、何をするのかわかりませんが、どういうわけか便利だと言われました。

スタイルシートは、幅R <640px、640px <= R <960px、および960px <= Rをターゲットにすることになっています。レイアウトは、それぞれ幅320px、640px、および960pxになります。

私が直面している問題は、私のスマートフォン（そしておそらくすべての最新の高ピクセル密度ハンドヘルドデバイス）にあります。私のスマートフォンの物理解像度は480x800pxですが、横向きモードでは533pxの幅が報告されます（ピクセル比は1.5、800 / 1.5 = 533.33なので、これは期待値だと思います）。533 <640なので、表示されるレイアウトは最も狭いレイアウトである320pxです。中型のものはスマートフォンで見栄えがすることを知っているので、それを使用したいと思います。1：1ピクセル比のデスクトップブラウザで機能する現在のルールに違反することなく、スマートフォンに640pxのレイアウトを横向きモードで表示させるにはどうすればよいですか？

各レイアウト（それぞれ320、640、960）の現在のメディアクエリは次のとおりです。

以前にPhoneGapアプリケーションを作成したとき、ページにレンダリングされた画像が高DPIデバイスで正しく表示されません。そこで、デバイスのDPIを考慮せずに、すべてのデバイスで1の固定ピクセル比でWebページを作成しました。ただし、これにより画像の鮮明さが低下します。

新しいアプリには流動的なスタイルを使用し、HTMLでは特定の幅と高さを使用しないことを計画しました。しかし、divの高さをピクセル単位で（CSSで）指定した場合、デバイスによって高さのレンダリングが異なります。

HTMLとCSSの幅と高さの比率を同じにする方法はありますか？

HTMLに異なるピクセル比で動作するように指示する未知のプロパティはありますか？

HTMLタグを使用しています：

明瞭さの低下を避けるために、device-dpiでページをレンダリングしたいと思います。親切にあなたのアイデアを提供してください。

<image>要素を使用する解像度に依存しないSVGを作成したいと思います。ユーザーエージェントの実際のピクセル比をテストすることは可能ですか？例を見てください：

ドキュメントでSwitchElementを見つけただけですが、「網膜ディスプレイ」機能がないため、あまり役に立たないようです。それともありますか？:)

現在、私が働いている会社では、デバイス (コンピューター、スマートフォンなど) のピクセル比に基づいてテンプレート (div、フォントなど) のサイズを指定するか、単純なピクセルに基づいて指定するかについて議論があります。

古い学校の単純なピクセルの代わりに、ピクセル比に基づいて div の幅/高さを指定することについてどう思いますか? また、ピクセル比に基づいたサイズ変更のベスト プラクティスは何ですか?

ありがとう！

ピクセル比は常に 1 または 2 であり、ターゲット dpi は常にピクセル/比率であるため、iOS は簡単です。ただし、Android では、ピクセル比に 1.3、1.5、場合によっては 2.25 が使用されます。Androidデバイスのターゲットdpiをピクセル/比率に設定する方法はわかりませんが、これは簡単な修正ですが、物理ピクセル数がディップの奇数倍であるディスプレイのピクセル不完全なソリューションを想像しています数 (1.3 や 1.5 など)。

現在、私は基本的に各のcssを作成しており、値にその比率を手動で-webkit-min-device-pixel-ratio掛けているだけです（丸めをわずかに調整しています）。pxsを使用emすると、フォントやその他のいくつかの点でうまく機能しますがpx、半分、空、またはオーバーラップするピクセルが必要ない場合は、要素の配置とサイズ変更に s を使用する必要があります。

これを行うより良い方法はありますか？

そうでない場合、背景画像を処理する最良の方法は何ですか。background-sizefor eachを変更しているという理由だけで、各比率のすべてのアイコンのすべての背景位置を書き直す必要は本当にありませんdevice-pixel-ratio。

emすべてのモバイル CSS に 'sを実装しました。(ratio: 1)、(ratio: 1.5)、または(ratio: 2) などのいずれかに基づいてfont-size、タグに once を設定しましたが、開くとAndroid の Chrome で私のサイトを表示すると、CSS で 1.5 の比率が検出されますが (このデバイスでは正しい)、すべてが Dolphin またはストック ブラウザーよりも 1.5​​ 倍大きくなります。bodydevice-pixel-ratio16px24px32px

そこで何が起こっているのか分かりますか？

ビューポート、@media、ピクセル比などに苦労しています。320px と 640px のテンプレートが 1 つずつあるスマートフォン (レスポンシブ) Web サイトがあり、次のことを実現したいと考えています。

幅 320px まで: 320px のテンプレートを表示します。

幅 321 から 639 ピクセル: 640 ピクセルのテンプレートを画面に合わせてズームアウトして表示します。

640px 以上: 640px テンプレートを表示 (ズームなし)

(640px テンプレートには実際に 640px 幅の画像やものが含まれているため、ズームはビューポートまたはメタ タグで行う必要があると思います)

現在、Web サイトでのモバイル デバイス検出に JavaScript を使用しています。これにより、モバイル ユーザーまたはデスクトップ ユーザーにさまざまなコンテンツを提供できます。

現在、私はwindow.devicePixelRatioandを使用screen.widthして、ユーザーがモバイル デバイスを使用しているかどうかを判断します。

768pxはモバイルまたはデスクトップを定義するポイントであるため、767 以下はモバイル、768 以上はデスクトップです。

これは完全に機能しますが、最近、Firefox で問題が発生しました。Firefox をズームインおよびズームアウトすると、 が変更されますwindow.devicePixelRatio。

Firefox でブラウザをズームインしているユーザーはサイトのモバイル バージョンを取得するため、これが問題になります。

デスクトップブラウザとは別のピクセル密度を取得する別の方法またはより良い方法を誰かが知っているかどうか疑問に思っていました.

少量のユーザー エージェント検出も使用しますが、絶えず変化するモバイル ユーザー エージェントのリストに追いつくのは大変な仕事であるため、画面解像度とユーザー エージェントの両方に同時に依存することはできません。時間。

誰かがこれについて何かアイデアを持っていて、それを助けることができれば、それは素晴らしいことです.

アップデート：

私はちょうどこれに出くわしました：

この簡単な数学は、この投稿で提案されています。

window.devicePixelRatio は IE 10 Mobile で機能しませんか?

私はそれをテストし、Firefoxで動作し、問題を解決しましたが、残念ながらChromeで問題が発生するようになりました:

すべてに有効な確実な解決策を見つけることができないようです。

ユーザーにGoogleマップを表示するアプリを開発しています。このアプリは、samsung S2、S3、およびS4で実行する必要があります。

これは、デバイスのピクセル比が 1.5、2.0、および 3.0 であることを意味し、問題が発生します。samsung S2 では、通りの名前が判読できるほど大きいのに対し、S3 および S4 では、マップが非常に密集した方法で表示されます (グラフィカルに言えば)。これにより、マップが作成されます (通りのグラフィックと通りの名前の両方がほとんど判読できなくなります)。

誰かがこの問題に遭遇したことがありますか?おそらくそれを克服する方法を知っていますか?

心から。