android - 如何为移动跨平台网站编写CSS

Question

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

现在我基本上是为每个 -webkit-min-device-pixel-ratio 编写 css，然后手动将我的 px 值乘以该比率(使用略微调整四舍五入)。使用 ems 非常适合字体和其他一些东西，但是如果我不想要一半，空，我必须使用 pxs 来定位和调整元素的大小或重叠像素。

有更好的方法吗？

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

Answer 1

您可以尝试使用 viewport元标记。它使您可以将宽度与设备的宽度相匹配。它还允许您设置初始缩放、设置缩放边界，甚至禁用缩放。和 here是指向有关使用元视口(viewport)标记的相关 Stack Overflow 问答的链接。