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

Question

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

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

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

例如这适用于 480x720:

@media screen and (min-device-width: 455px) and (max-device-width : 720px) and (orientation: portrait){ /* Styles */ }

Blockquote

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

@media only screen and (min-device-width : 480px) and (orientation: portrait){ /* Styles*/ }

然后它适用于 480x800，但 480x720 也使用它。

我尝试了很多不同的东西，min-device-width，max-device-width 等。我也不知道为什么 (min-device-width: 455px) 适用于 480x720(找到它 here )

任何帮助将不胜感激:)

Answer 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)

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