5

我一直在尝试让媒体查询在具有不同设备像素比的设备上正常工作。当我从菜单中选择 Nexus S 时，它看起来很棒。
当我从菜单中选择 Nexus 4 时，展示位置已关闭。
从 Chrome 开发工具中，我看到 Nexus S 的计算样式是

(-webkit-max-device-pixel-ratio: 1)

对于 Nexus 4：

(-webkit-max-device-pixel-ratio: 1.5)


这是我的 CSS：

@media only screen and (orientation:landscape) and (-webkit-max-device-pixel-ratio: 1.5 ){
    .txt{
        top: 170px;
        left: 150px;
        position:absolute;
        font-size:60px;
     }
}

@media only screen and (orientation:landscape) and (-webkit-max-device-pixel-ratio: 3 ) and(-webkit-min-device-pixel-ratio: 2 ){
    .txt{
        top: 270px;
        left: 200px;
        position:absolute;
        font-size:60px;
    }
}

这是我的元视口标签：

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;"/>

我使用 emulate.phonegap.com (AKA Ripple) 进行测试。

4

2 回答 2

3

您不能使用-webkit-max-device-pixel-ratio，因为它（尚）不受支持。

我添加了这个答案，因为它可以帮助其他有相同问题的用户更快地找到解决方案。

于 2013-11-11T13:10:01.337 回答
0

遇到同样的问题并打了我一天多的头。终于得到了默认浏览器和Cordova的WebKit使用的媒体查询完全不同的解决方案。

在您的 PhoneGap 起始页中使用http://mqtest.io而不是您的主页，并检查为该特定 webkit 生成的媒体查询。在您的应用程序中使用它。能够针对任何屏幕因素。

如果您有任何问题，请尝试让我知道。

于 2014-09-05T17:12:43.940 回答