Phonegap，480x720、480x800 和 480x854 的 css 样式问题答案

【问题标题】：Phonegap, problems with css styling for 480x720, 480x800 and 480x854Phonegap，480x720、480x800 和 480x854 的 css 样式问题
【发布时间】：2012-12-16 05:52:03
【问题描述】：

我已经工作了几天来解决 Phonegap 的 CSS 问题。

我有一个显示地图和一些控制按钮的应用程序。我需要设置地图大小，以便为按钮留出空间。

它适用于大多数屏幕分辨率，但对于 480x720、480x800 和 480x854，它不适用于三种不同样式的我。我在这里看到过其他有问题的人，但仍然有问题。三种屏幕分辨率选择相同的风格。

例如，这适用于 480x720：

@media screen and (min-device-width: 455px) and (max-device-width : 720px）和（方向：纵向）{ /* 样式 */ }

块引用

但随后 480x800 选择相同的样式。如果我再为 480x800 创建一个新样式：

@media only screen and (min-device-width : 480px) and (orientation: Portrait){ /* 样式*/ }

那么它适用于 480x800，但 480x720 也可以使用它。

我尝试了很多不同的东西，最小设备宽度、最大设备宽度等。我也不知道为什么 (min-device-width: 455px) 适用于 480x720（找到它here）

任何帮助将不胜感激:)

【问题讨论】：

标签： css cordova screen-size

【解决方案1】：

这只是我的想法，但我相信你需要做这样的事情：

@media screen and (max-device-width: 480px) and (max-device-height: 720px) and (orientation: portrait)
@media screen and (max-device-width: 480px) and (max-device-height: 800px) and (orientation: portrait)
@media screen and (max-device-width: 480px) and (max-device-height: 854px) and (orientation: portrait)

为每个屏幕分辨率提供正确的样式。

【讨论】：