问题标签 [resolution-independence]

我一直在研究创建响应式网站/应用程序的不同替代方案，但我找不到与移动设备无关的解决方案。

我正在寻找在具有任何给定分辨率的每个移动设备中看起来都相同的布局。例如：用于移动浏览器的Google Plus 网站。我在我的LG G3 (1440 x 2560)和iPhone 5S (640 x 1136)中使用 chrome mobile 打开了该网站，该网站看起来完全一样，而桌面网站几乎没有响应。

我一直在使用 bootstrap 3 网格系统，但 bootstrap 使用视口的分辨率。

我的问题是：我怎样才能实现这种类型的布局？

我有一个应用程序并想在其中放置图形。如果我以高分辨率制作图形，例如 2048 x 1536 (iPad)，有没有办法将其正确缩小到其他分辨率较低的设备？我的目标是避免为不同的设备（@2x、ipad 等）制作 n 个版本的图形，它们基本上都是相同的图像，只是在 Photoshop 中缩小了尺寸。我更愿意在 iOS 中自动制作一个非常高分辨率的图形和缩小比例（保留比例）。

目前我正在使用以下计算来独立计算字体比例分辨率：

我正在使用以下代码来相对于彼此定位我的字体：

我完全糊涂了。这些文本在我的 8 英寸平板电脑上相互显示，但它们在我的手机上完全正确对齐。

我应该如何正确地独立定位这个分辨率？

我试图通过将透明 PNG 分解为彩色和 alpha 图像来减少它们的下载大小。这种方法效果很好，对于我客户的图像，尺寸减小了 50% 以上。

为了重新组合我正在尝试使用 SVG 和画布的图像。

SVG 解决方案使用不透明蒙版，而画布使用 globalCompositeOperation。

问题是，SVG 在缩小时会错误地显示暗边（通过在 CSS 中指定大小或直接在 SVG 上指定）。当以与输入图像相同的尺寸渲染 SVG 时，不会出现这些暗边。画布工作正常。这发生在我测试的所有浏览器（Chrome、IE11、Firefox）中

我认为的问题是 SVG 将独立调整 alpha 图像和彩色图像的大小，然后应用不透明蒙版。但是，这种方法不起作用。在图像处理中，众所周知，要调整透明图像的大小，要么必须将颜色分量与 alpha 相乘，然后使用标准的大小调整算法，要么必须执行加权平均（因为大多数透明像素具有对最终颜色的影响较小）。例如见这个讨论

应用 SVG 滤镜效果时，最初可以调整使用的中间分辨率，但我不知道在使用 SVG 蒙版属性时如何做到这一点（Robert Longson 正确地向我指出滤镜效果不支持这一点不再，因为该filterRes属性已被弃用）

这是 SVG 代码（我们在任何兼容 HTML5 的浏览器中直接从我的网站运行它）

有谁知道如何调整 SVG 蒙版效果以使这些边缘伪影不出现？

非常感谢，

彼得

对于将部署到特定设备的简单项目，我想知道是否可以使用本机像素指定测量值，从而忽略设备 dpi（例如，它可能被 Windows 中的用户在系统级别覆盖）。

目前，唯一的解决方案似乎是除以像素比的任何值。

有没有更简单、更易于管理的方法？

我正在 WPF 中开发一个独立于分辨率的应用程序。我在我的应用程序中使用 mahapps Metro 控件。我有一个网格，它在 * 中分为行和列，并且 4 个文本框占据了该网格中的特定行和列。问题是 TextBox 没有占据该行，因为 Textbox 的底部边框不可见，但是当我将样式更改为 x:Null 时，问题就消失了。这是 Metro TextBox 特有的问题吗？我试过 VerticalAlignment = "Stretch" 但这没有帮助。在 1440 X 900 等更高分辨率下也可以看到底部，但在 1366 X 768 中看不到。我错过了什么？

I have a physical object in the shape of a circle that measures 3 inches in diameter. My application transposes this circle shape onto the screen so the user can visually check off what they see into the application from the circle object. The problem I have is that I need the circle object to be 3 inches in diameter and appear the same size on all monitor types and all resolutions.

Is this possible? I am using WPF and have something like this already:

My inches to DIU converter looks something like this:

As expected, this works very well on a say a 1920 x 1200 res monitor, but when I start to get lower, naturally everything looks bigger. I need the diameter of my <Ellipse> tag to always be 3 inches no matter what resolution the person's monitor is.

Thanks!