问题标签 [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。我知道中号在智能手机上看起来不错，并且更愿意使用它。我应该怎么做才能让智能手机在横向模式下显示 640px 布局，而不会破坏当前适用于 1:1 像素比桌面浏览器的规则？

每个布局（分别为 320、640、960）的当前媒体查询是：

当我之前创建 PhoneGap 应用程序时，页面上呈现的图像无法正确显示在高 DPI 设备上。所以我为所有设备制作了固定像素比率的网页：1，而不考虑设备 DPI。但这会降低图像的清晰度。

我计划为我的新应用程序使用流体样式，而不是在 HTML 中使用特定的宽度和高度。但是，当我为 div（在 CSS 中）指定以 px 为单位的高度时，高度在不同设备中呈现不同。

有什么方法可以使 HTML 的比例以及 CSS 的宽度和高度相同？

是否有任何未知属性可以告诉 HTML 以不同的像素比率表现。

我正在使用 HTML 标签：

我想在 device-dpi 中呈现页面以避免清晰度降低。请提供您的想法。

我想创建使用 <image> 元素的与分辨率无关的 SVG。是否可以测试用户代理的实际像素比？请看示例：

我只在文档中找到了Switch Element ，但它似乎不是很有帮助，因为没有“视网膜显示”功能。或者有吗？:)

现在在我工作的公司里有一个争论，我们是否应该根据设备（计算机、智能手机等）的像素比来指定我们的模板（div、字体等）的尺寸，或者只是简单的像素。

您如何看待基于像素比而不是老式简单像素来指定 div 的宽度/高度？根据像素比率调整大小的最佳做法是什么？

谢谢！

iOS 很简单，因为像素比总是 1 或 2，而目标 dpi 总是像素/比。然而，Android 使用 1.3、1.5，在某些情况下使用 2.25 作为像素比。我不知道有什么方法可以将目标 dpi 设置为 android 设备的像素/比率，这将是一个简单的解决方案，但我认为对于物理像素数是其倾角奇数倍的任何显示器来说，这是一个像素不完美的解决方案计数（那些 1.3、1.5 等）。

现在我基本上是为 each 编写 css -webkit-min-device-pixel-ratio，然后手动将我的px值乘以该比率（略微调整舍入）。使用ems 对字体和其他一些东西很有用，但px如果我不想要一半、空白或重叠像素，我必须使用 s 来定位和调整元素大小。

有一个更好的方法吗？

如果不是，那么处理背景图像的最佳方法是什么。我真的不想仅仅因为我正在更改每个比例的每个图标的每个背景位置，就必须重新编写每个背景background-size位置device-pixel-ratio。

我已经em在我所有的移动 CSS 中实现了 '，我只是font-size在标签上设置了一次，基于body( ratio: 1)、(ratio: 1.5) 或(ratio: 2) 等，但是当我打开我在 Android 上的 Chrome 中的网站，它在 CSS 中捕获了 1.5 的比率（对于此设备是正确的），但所有内容都比 Dolphin 或股票浏览器中的大 1.5 倍。device-pixel-ratio16px24px32px

知道那里发生了什么吗？

视口、@media、像素比率等让我很难受。我有一个智能手机（响应式）网站，其中包含一个 320px 和一个 640px 模板，我想实现以下目标：

最大 320px 宽度：显示 320px 模板。

从 321 到 639 像素宽度：显示 640 像素模板缩小以适合屏幕。

640px 或更多：显示 640px 模板（无缩放）

（640px 模板有真正 640px 宽度的图像和东西，所以我想缩放应该由视口或元标记完成）

I am looking to make my websites appear the same size on retina and other higher resolution screens that they do on standard screens. That is to say make them optically look the same but with more detail on the higher resolution screens.

So if we had a screen with four times the number of pixels per inch then I would want the height and width of elements to be twice the normal CSS pixel measurements as well as doubling the font size.

I looked into this and it appears that the solution detects the DPI and then loads different CSS.

The thing is these screens all have different DPIs.

So if we had a an element with a height of say 24px. I would like it to adjust its height to accurately fit whatever the pixel ratio is. IE. do the Maths and do it for all elements.

我目前在我的网站上使用 JavaScript 进行移动设备检测，这样我就可以为移动或桌面用户提供不同的内容。

目前，我使用window.devicePixelRatioandscreen.width来确定用户是否在移动设备上，如下所示：

768px是我们定义移动或桌面的点，因此 767 及以下为移动，768 及以上为桌面。

这很好用，但是我最近遇到了 Firefox 的一个问题，当 Firefox 放大和缩小时，它会改变window.devicePixelRatio，所以：

这现在给我带来了一个问题，因为任何在 Firefox 上放大浏览器的用户都会获得该网站的移动版本。

我想知道是否有人知道获得与桌面浏览器分开的像素密度的不同或更好的方法。

我也使用了少量的用户代理检测，但是因为跟上不断变化的移动用户代理列表是一项艰巨的工作，所以我不可能同时依赖屏幕分辨率和用户代理时间。

如果有人对此有任何想法并且可以提供帮助，那就太棒了。

更新：

我刚刚遇到这个：

这篇文章中建议了这个快速的数学：

window.devicePixelRatio 在 IE 10 Mobile 中不起作用？

我已经对其进行了测试，它可以在 Firefox 中运行，并解决了我的问题，但不幸的是，现在在 Chrome 中出现了问题，所以：

我似乎找不到适用于所有事情的可靠解决方案。

我一直在开发一个为用户提供谷歌地图的应用程序，这个应用程序应该在三星 S2、S3 和 S4 上运行。

这意味着设备像素比为 1.5、2.0 和 3.0，这导致了一个问题：虽然在三星 S2 上街道名称大到可以阅读，但 S3 和 S4 以非常密集的方式呈现地图（从图形上讲），这使得地图（街道图形和街道名称几乎难以辨认）。

有没有人遇到过这个问题，并且可能知道如何克服它？

真挚地。