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

时间:2013-02-06 20:31:38

标签: android ios css mobile pixel-ratio

iOS很简单,因为像素比率始终为1或2,目标dpi始终为像素/比率。然而,Android使用1.3,1.5,在某些情况下使用2.25像素比。我不知道有任何方法可以将目标dpi设置为Android设备的像素/比例,这将是一个简单的解决方案,但我想象一个像素不完美的解决方案,适用于任何显示器,其物理像素数是它的陡峭的奇数倍数(1.3,1.5等)。

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

有更好的方法吗?

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

1 个答案:

答案 0 :(得分:0)

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

相关问题