Question

我正在使用PhoneGap和js / css3开发iPhone / iPad应用程序，并且最近开始使用iPad更大的屏幕尺寸来对我的布局进行特定调整。我在我的CSS中添加了一个只有iPhone的部分

@media screen and (max-device-width: 480px) {

和仅限iPad的

部分

@media screen and (min-device-width: 481px) {

当我调试时，它们似乎在我的桌面上正常工作（使用chrome，在win和mac中都有，在safari中使用mac）。当我在xCode中构建我的应用程序并在设备上运行它时，似乎这些部分中的所有规则都被完全忽略，并且我的布局都是错误的。

我是否应该使用一些技巧，以使这项功能适合我？

Answer 1

将视口添加到html文档的头部非常重要：

<html>
  <head>
    ...
    <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
    ...
  </head>
  <body>
    ...
  </body>
</html>

另见： CSS Media Query Orientation Change not working PhoneGap

Answer 2

你能试试吗

@media only screen and (-webkit-min-device-width: 481px) {

仅针对您的iPad部分并回复我？

使用PhoneGap时，css媒体查询无法正常工作

2 个答案: