問題タブ [pixel-density]

コンテキストなしで dp を px に変換する非常に巧妙な方法があり、次のようになります。

Google GitHub ページのすべての Google の例では、次のアプローチを使用しています。

では、最初のアプローチに何か問題がありますか? 私にとっては、すべてのアプリで問題なく動作しますが、失敗する可能性がある場合があることを知りたいですか?

デバイスのサイズ指定子 (large、xlarge、xxlarge など) と画面ピクセル密度指定子 (hdpi、xhdpi、xxhdpi など) の正しい組み合わせを見つける方法を知りたいです。多くの「値」フォルダーを定義しましたが、それでも私の Oppo F3 には不均衡がいくつかあるため、Oppo F3 を例として使用して方法を説明してください。

画面のピクセル密度を処理するのに本当に苦労しています。アプリケーションがすべてのデバイスで同じように見えるようにするにはどうすればよいですか? 答えは単位を dp から px に変更することかもしれないと思いました:

しかし、これもうまくいかなかったようで、これを処理する方法についての答えが見つからないようです。

I have read about this problem quite often so far and it also occurs for my own projects. Here is an introduction of what I have found out so far about the srcset and the sizes attribte.

There are two different possibilities on how to use the srcset-attribute (source w3c: http://w3c.github.io/html/semantics-embedded-content.html#device-pixel-ratio):

1. Device-pixel-ratio-based selection when the rendered size of the image is fixed

This is a simple and reliable way to use srcset. You simply say: If the device-pixel ratio of the target devicer is bigger than x, display this image with the following higher resolution.

The x descriptor is not appropriate when the rendered size of the image depends on the viewport width (viewport-based selection), but can be used together with art direction.

Example:

2. Viewport-based selection

This method allows you to display different image sizes depending on the size of your viewport. This is the method you are primarily using within your example.

The srcset and sizes attributes can be used, using the w descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image).

Simple example:

One step further: Using the sizes attribute

The default for Viewport-based selection and srcset is, that the image always has 100% width (100vw). The sizes attribute is giving the great possibility to tell the browser, how the width of an image is at a certain screen width.

The sizes attribute sets up the layout breakpoints at 30em and 50em, and declares the image sizes between these breakpoints to be 100vw, 50vw, or calc(33vw - 100px). These sizes do not necessarily have to match up exactly with the actual image width as specified in the CSS.

The user agent will pick a width from the sizes attribute, using the first item with a (the part in parentheses) that evaluates to true, or using the last item (calc(33vw - 100px)) if they all evaluate to false.

Example:

Here is the challange where I would be really glad if someone could enlighten me

Can I rely on srcset that a Client always load the correct image? Or is the actually loaded image also depending on processing power and internet connection speed as some people stated? I had complaints about retina devices which load lower resolution images.

How can I use both: Device-pixel-ratio-based and viewport-based selection together? Because for each possible size in sizes, I may want to define a retina image with 200% size as well as a non-retina image.

And furthermore: Does it make sense to use different images within srcset for different viewport sizes or is this a misuse of the srcset attribute? If it is possible to combine device-pixel-ratio-based and viewport-based selection, this should also be possible.

Material IO のデバイス メトリクスをご覧ください。

Google Pixel と HTC One M9 に注意してください。

これら 2 つのデバイスは、物理的なサイズとピクセル数は同じですが、ピクセル密度が異なると主張されています。

これは、ピクセル密度に関する私の理解と矛盾します。

次の中でどれが正しいですか？

1. ピクセル密度に関する私の理解は間違っています。このページの情報はすべて正しいです。
2. ページの情報が間違っています。
3. HTC One M9 では、画面サイズは 5.0 ですが、そのごく一部が表示に使用されていません (つまり、実際の表示サイズは Google Pixel よりも小さいです)。
4. 想像できない何か