我一直试图让媒体查询在具有不同设备像素比率的设备上正常工作.
当我从菜单中选择Nexus S时,它看起来很棒.
当我从菜单中选择Nexus S时,它看起来很棒.
从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)进行测试.