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

标签 android ios css mobile pixel-ratio

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 就必须为每个比例的每个图标重写每个背景位置.

最佳答案

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

关于android - 如何为移动跨平台网站编写CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14738228/

相关文章:

android - 如何在 flutter 中仅对一个小部件使用 setState 方法?

java - Android 抽屉式导航失败

ios - UserInteractionEnabled 是否像 UIView 层次结构的 Alpha 一样工作?

C# Twitter 和 Restsharp 身份验证

javascript - chrome 开发工具,如页面底部的 UI 面板 UI 设计

php - 如何保存响应式菜单打开/关闭值?

android - "Observer ... was not registered"错误

android - Android 相机拍摄的照片比预期的要小

iphone - 如何通过 iPhone 应用程序将图像附加到消息中?

javascript - 模拟宽度 : calc(100%) - with jQuery not working