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

iOS很容易，因为像素比率始终为1或2，并且目标dpi始终为像素/比率。然而，Android使用1.3,1.5，在某些情况下，像素比例为2.25。我不知道有什么方法可以将目标dpi设置为android设备的像素/比例，这将是一个简单的解决方法，但我想像一个像素不完美的解决方案，用于任何显示器，其物理像素数是其陡降的奇数倍计数（1.3，1.5等）。如何为移动跨平台网站编写CSS

现在我基本上为每个-webkit-min-device-pixel-ratio写入css，并且只需手动将我的px值与该比率相乘（对舍入进行轻微调整）即可。使用em s适用于字体和其他一些东西，但如果我不想要半像素，空像素或重叠像素，则必须使用px来定位和调整元素的大小。

有没有更好的方式来做到这一点？

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

来源

2013-02-06 bearfriend

您可以尝试使用viewport元标记。它可以让您将宽度与设备宽度相匹配。它还允许您设置初始缩放，缩放设置界限或甚至禁用缩放。而here是一个链接到相关的堆栈溢出问题和使用元视口标签的答案。

来源

2013-02-06 20:53:40 Cthulhufish

我实际上已经设置了视口，但Android设备的设备宽度似乎是物理像素，而不是倾角。你知道这是否正确吗？我想我的问题，真的是我对像素完美的痴迷。我无法忍受以某种方式扩大规模的想法。 – bearfriend

对不起，我没有直接的经验。不过，我认为缩放只是现代网页设计的一部分。我能想到的最佳选择是使用媒体查询将网站捕捉到基于视口的不同大小的布局，而不是连续不断地进行。 – Cthulhufish

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

回答

相关问题