标签: pixel-density

我必须使用phonegap为Android应用程序设计启动画面(加载时适合屏幕的图像).我必须设计适合4种屏幕的4种尺寸的图像,如ldpi,mdpi,hdpi,xhdpi.任何人都可以告诉我这些屏幕的确切大小(以像素为单位),以便我可以设计那么大小

示例答案:

ldpi - 1024X768 px
mdpi  - 111 X 156 px  

 We support ldpi, mdpi, hdpi and xhdpi displays; the following will define splash screens for each specific screen type.

<gap:splash src="splash/android/ldpi.png" gap:platform="android" gap:density="ldpi" />
<gap:splash src="splash/android/mdpi.png" gap:platform="android" gap:density="mdpi" />
<gap:splash src="splash/android/hdpi.png" gap:platform="android" gap:density="hdpi" />
<gap:splash src="splash/android/xhdpi.png" gap:platform="android" gap:density="xhdpi" />

我正在将iOS应用程序转换为android.(使用android studio)

我的所有形象都是...... @ 2x.png

那么,我的2个问题:

1-我可以将我的所有@ 2x复制到ONLY文件夹"xhdpi",android会自动调整设备的密度吗？

2-"xhdpi"真的相当于xcode @ 2x吗？

我注意到我的应用程序在同一设备上显示略有不同的布局,具体取决于我是运行调试APK还是签名版本APK.经过多次刮擦,我已将问题隔离到设备密度特定的资源值.当我在调试模式下运行应用程序时,设备使用v alues-xxhdpi/dimens.xml中的维度,当我运行签名的APK时,它使用values-xxxhdpi/dimens.xml中的维度.有问题的设备是运行Android 7.0的三星Galaxy S7

为了证实这一点,我创建了一个新的空项目,其中只有一个hello world字符串.我在values/strings.xml,values-xxhdpi/strings.xml和values-xxxhdpi/strings.xml中为字符串定义了不同的值.结果如下.

• Debug apk显示xxhdpi string.按预期工作.
• 从android studio运行发布apk(通过在gradle文件中指定签名配置)显示xxhdpi string.按预期工作.
• 通过选择Build |生成签名的apk 生成签名APK并运行它.这次应用显示xxxhdpi字符串.为什么？!

为什么会这样？为什么android在调试模式下选择xxhdpi资源,在签名的APK中选择xxxhdpi资源？

到目前为止,我经常读到这个问题,这也适用于我自己的项目.以下介绍了迄今为止我发现的有关srcset和尺寸属性的内容.

如何使用srcset-attribute 有两种不同的可能性(源w3c:http://w3c.github.io/html/semantics-embedded-content.html#device-pixel-ratio ):

1. 当图像的渲染大小固定时,基于设备像素比率的选择

这是一种简单可靠的使用方法srcset.您只需说:如果目标设备的设备像素比率大于x,则使用以下更高的分辨率显示此图像.

当图像的渲染大小取决于视口宽度(基于视口的选择)时,x描述符不合适,但可以与艺术方向一起使用.

例:

 <img src="/uploads/100-marie-lloyd.jpg"
      srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
      alt="" width="100" height="150">

2. 基于视口的选择

此方法允许您根据视口的大小显示不同的图像大小.这是您在示例中主要使用的方法.

可以使用srcset和sizes属性,使用w描述符来提供仅在大小上变化的多个图像(较小的图像是较大图像的缩小版本).

简单的例子:

<h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
    src="wolf-400.jpg" alt="The rad wolf"></h1>

更进一步:使用sizes属性

基于视口的选择和srcset的默认值是,图像始终具有100%宽度(100vw).sizes属性可以告诉浏览器,图像的宽度如何处于特定的屏幕宽度.

sizes属性在30em和50em处设置布局断点,并声明这些断点之间的图像大小为100vw,50vw或calc(33vw - 100px).这些尺寸不一定必须与CSS中指定的实际图像宽度完全匹配.

用户代理将从sizes属性中选择一个宽度,使用带有(括号中的部分)的第一个项目评估为true,或者使用最后一个项目(calc(33vw - 100px)),如果它们都评估为false.

例:

<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">

如果有人能够启发我,我会很高兴这里的挑战

我可以依赖srcset,客户端总是加载正确的图像吗？或者实际加载的图像还取决于处理能力和互联网连接速度,正如一些人所说的那样？我抱怨视网膜设备加载较低分辨率的图像.

我如何同时使用:基于设备像素比率和基于视口的选择？因为对于每种可能的尺寸大小,我可能想要定义具有200%尺寸的视网膜图像以及非视网膜图像. …

我注意到当我在xml中使用elevation属性并将其设置为4dp时,我得到一个正常的阴影.当我在java中使用setElevation(4)时,我得到的阴影比xml属性少.我该如何解决这个问题？

我0.5px在我的React Native应用程序中使用了边框.这在大多数设备上运行良好,但在iPhone 6 plus这些边框上显示模糊.在读完像素比率后,我决定使用下面的内容.

我想知道是否有其他人能够0.5px在高像素密度设备上成功使用边框？

borderWidth: PixelRatio.get() >= 3 ? 1 : 0.5

有一种非常巧妙的方法可以将dp转换为不带Context的px，它是这样的：

public static int dpToPx(int dp) {
    float density = Resources.getSystem().getDisplayMetrics().density;
    return Math.round((float) dp * density);
}

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

public static int convertDpToPixel(Context ctx, int dp) {
    float density = ctx.getResources().getDisplayMetrics().density;
    return Math.round((float) dp * density);
}

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

Please take a look at Material IO's device metrics:

Pay attention to Google Pixel and HTC One M9.

These 2 devices have the same physical size, same number of pixels, but claimed to have different pixel densities.

This contradicts with my understanding of pixel density.

Which of the following is true?

1. My understanding of pixel density is wrong. All information on the page is correct;
2. The information on the page is wrong;
3. On HTC One M9, although the screen …

我很长一段时间都使用图片元素来制作每个视口不同尺寸的响应式图像。它工作得很好，但现在我被迫切换到响应式，并且<img>我尝试将我的图片元素重写为 IMG 样式。srcsetsizes

经过长时间的搜索，我在以下位置找到了很好的文档：

https://www.dofactory.com/html/img/sizes 以及更多详细信息： https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

带图片的代码是这样的：

<picture>
    <source media="(max-width: 740px)" src="740.jpg" type="image/jpeg">
    <source media="(max-width: 980px)" src="1280.jpg" type="image/jpeg">
    <source media="(max-width: 1280px)" src="1600.jpg" type="image/jpeg">
    <source media="(max-width: 1480px)" src="1920.jpg" type="image/jpeg">
    <img src="740.jpg" title="..." alt="..." />
</picture>  

我将其重写为响应式 img，如下所示：

<img src="740.jpg" title="..." alt="..." 
    srcset="
       740.jpg 740w,
       1280.jpg 1280w,
       1600.jpg 1600w,
       1920.jpg 1920w" 
    sizes="
       (max-width: 740px) 740px,
       (max-width: 980px) 1280px,
       (max-width: 1280px) 1600px,
       (max-width: 1480px) 1920px"
/>

这在浏览器中的第一次测试中似乎效果很好。但后来我注意到在移动设备上它加载了太大的图像。

原因是某些移动设备的像素密度不同，如 响应图像完整指南中所述

您也可以使用 Firefox 的开发工具来模拟：

我尝试通过将代码更改为来解决此问题

<img src="1920.jpg" title="..." alt="..." 
    srcset=" …

我试图了解res/drawables图像应该如何使用不同的屏幕密度.现在我有一个1.5应用程序,例如,我有一个100x100像素的图像.当在Droid上使用时,它会缩放此图像,使其在该设备上看起来相对大小相同(所有其他布局缩放由我处理,使用dip单位).

所以现在我需要更新我的项目并添加三个文件夹,对吧？:

1. 绘制,LDPI
2. 绘制,MDPI
3. 绘制,华电国际

所以我要将我的100x100图像放在-mdpi文件夹中.如果我想为-hdpi文件夹制作一个版本 - 我怎么知道要扩大它的大小呢？我的意思是它看起来默认它应该大1.5倍.但是如果我把它做大2.0倍,或者我正在运行的设备的密度不是基线G1的1.5倍,会发生什么？我的布局不会在这些设备上开始看起来不同吗？

谢谢