我一直在尝试让媒体查询在具有不同设备像素比的设备上正常工作。当我从菜单中选择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(又名Ripple)进行测试。
您不能使用-webkit-max-device-pixel-ratio
,因为它(还)不受支持。
我添加了这个答案,因为它可以帮助其他有同样问题的用户更快地找到解决方案。
我遇到了同样的问题,一天多都在思考。最终得到了默认浏览器和Cordova的WebKit使用的媒体查询完全不同的解决方案。
使用http://mqtest.io在PhoneGap起始页中,并检查为该特定webkit生成的媒体查询。在你的应用程序中使用它。能够针对任何屏幕因素。
如果你有任何问题,请告诉我。