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