问题标签 [pixel-density]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
557 浏览

android - Android Studio 密度

我从 Eclipse 更改为 Android Studio。我面临模拟器的密度问题。例如,在 Eclipse 中,三星 S4 的密度为 xxhdpi,但在 Android Studio 中为 xhdpi。三星 S4:4,99' - 1080 x 1920。

这是我的代码:

密度值为 2.625。所以在xhdpi的情况下输入,但我需要在xxhdpi输入!问题是什么?有一个更好的方法吗?。

谢谢

0 投票
3 回答
1476 浏览

android - 在没有上下文的情况下将 dp 转换为 px

有一种非常简洁的方法可以在没有上下文的情况下将 dp 转换为 px,它是这样的:

Google GitHub 页面上的每个 Google 示例中,他们都使用以下方法:

那么第一种方法有问题吗?对我来说,它在我所有的应用程序中都可以正常工作,但我想知道在某些情况下它可能会失败吗?

0 投票
1 回答
6037 浏览

html - Specifying both image size and pixel density in srcset

Here's my img tag:

I'm using imgix which returns the image in correct pixel density based upon the dpr query parameter. The above does not seem to work, the image is not rendered in the right size. Am I not using the correct format?

0 投票
0 回答
143 浏览

android - 如何以非编程方式找出设备的尺寸和屏幕密度说明符

我想知道如何找出设备尺寸说明符(large、xlarge、xxlarge 等)和屏幕像素密度说明符(hdpi、xhdpi、xxhdpi 等)的正确组合。请以 Oppo F3 为例说明该方法,因为我定义了许多“值”文件夹,但在我的 Oppo F3 上仍然存在一些不成比例。

0 投票
1 回答
40 浏览

android - Android:如何计算像素密度

我真的在努力处理屏幕的像素密度。如何使我的应用程序在所有设备上看起来都一样?我认为答案可能是将单位从 dp 更改为 px:

但这似乎也不起作用,我似乎无法找到如何处理这个问题的答案。

0 投票
0 回答
40 浏览

cordova - 不同像素密度的相同尺寸

我正在开发一个 Cordova 应用程序,但我遇到了这个问题:我用 px 度量编写了所有 css,现在我看到在低密度设备中,一切看起来都要大得多。我希望每台设备上的所有内容都具有相同的尺寸(即使以在较小的设备中使用较小的文本为代价),我尝试使用 rem 而不是 px 但它不能解决问题。我尝试使用 zoom 属性,但某些元素的尺寸已经正确,我不想更改它们。完美的解决方案是用视口“强制”密度,但唯一能做到这一点的属性已被弃用......:/

0 投票
1 回答
1393 浏览

html - Responsive images - srcset and sizes attribute - how to use both correctly: device-pixel-ratio-based and viewport-based selection together?

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:

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

0 投票
1 回答
677 浏览

java - Android 8 状态栏图标的正确资产大小是多少(Android 给出的信息有冲突)

Android 状态栏图标的大小应该设置为 24dp 还是 18dp?

我看到相互矛盾的建议/示例:

  • 来自Android API 指南的24dp
  • 来自Android 图标模板包的24dp
    • 实际的 mdpi PSD 文件是 24px,其中@1x 是 24dp
  • 18dp来自 Pixel 手机的屏幕截图
    • 图标尺寸为 47 像素。除以 2.6 的像素密度得到 @1x = 18dp

同时,根据材料设计指南,状态栏本身的高度为24dp,与屏幕截图尺寸相匹配(63px / 2.6 = 24dp)。但如果这些都是真的,那么状态栏图标必须更小。

0 投票
0 回答
78 浏览

javascript - 如何检测和区分设备像素密度并在 Chrome 中进行缩放?

如何检测(在 Chrome 中的 JS 中)缩放级别 设备像素密度(分别),以便能够将图形缩放到 1 个设备 px = 1 个屏幕 px 的级别(以避免模糊)但仍然允许用户使用浏览器缩放功能?

0 投票
1 回答
470 浏览

android - 为什么 2 个相同尺寸、相同分辨率的设备声称不同的密度?

请查看Material IO 的设备指标

注意 Google Pixel 和 HTC One M9。

在此处输入图像描述

这两个设备具有相同的物理尺寸、相同的像素数,但声称具有不同的像素密度。

这与我对像素密度的理解相矛盾。

以下内容哪些是对的?

  1. 我对像素密度的理解是错误的。页面上的所有信息都是正确的;
  2. 页面信息错误;
  3. 在 HTC One M9 上,虽然屏幕尺寸是 5.0,但有一小部分没有用来显示(即实际显示尺寸小于 Google Pixel)
  4. 我无法想象的东西